jQuery plugin: Shuffle Letters

1. jQuery plugin: Shuffle Letters web150 | assignment 11 | derek j brown

2. It creates an interesting effect that randomizes the content of a text element.

3. It’s a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

4. The first step is to write the backbone of our jQuery plugin. We will place the code inside a self-executing anonymous function, and extend $.fn. Next , turn your attention to the randomChar() helper function. It will take a type argument (one of “lowerLetter“, “upperLetter” or “symbol“) and return a random character. The plugin will take either the contents of the DOM element it was called on, or the text property of the object passed as an argument. It then splits the string into characters and determines the type of each one. The shuffle function then uses setTimeout() to call itself and randomize the string, updating the DOM element on each step.

5. In the demo you will see that you are able to type your own text and test it out.