background preloader

Shuffle Letters Effect: a jQuery Plugin

Shuffle Letters Effect: a jQuery Plugin
Martin Angelov In this short tutorial we will be making 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. The Code 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. assets/js/jquery.shuffleLetters.js (function($){ $.fn.shuffleLetters = function(prop){ var options = $.extend({ },prop) return this.each(function(){ }); }; function randomChar(type){ } })(jQuery); Next we will turn our attention to the randomChar() helper function. function randomChar(type){ var pool = ""; if (type == "lowerLetter"){ pool = "abcdefghijklmnopqrstuvwxyz0123456789"; } else if (type == "upperLetter"){ pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; } else if (type == "symbol"){ pool = ",.? We could have used a single pool string for all types of characters, but this will do for a better effect. The Plugin In Action Done Tutorials

100 Awesome Jquery plugins 2013 | Osman Erdi 100 awesome Jquery plugins thanx for the all tutorial websites 1. Alertify.js Alertify (github) is small library for presenting beautiful dialog windows and notifications. It is easy to customize with CSS, has a simple API and doesn’t depend on third party libraries (but plays nicely with them). To use it, include the js file and call the methods of the global alertify object: alertify.alert("Message"); alertify.confirm("Message", function (e) { if (e) { } else { } }); Alertify.js 2. jQuery Avgrund jQuery Avgrund (github) is another cool dialog solution. jQuery Avgrund Forms Forms are tedious and boring. 3. iCheck iCheck (github) is a jQuery plugin that enhances your form controls. iCheck 4. Long Press is a jQuery plugin that eases the writing of accented or rare characters. Long Press 5. jQuery File Upload jQuery File Upload (github) is a widget with multiple file selection, drag&drop support, progress bars and preview images. jQuery File Upload 6. Complexify 7. jQuery Knob jQuery Knob 8. 9. Chosen

AppDemoStore 10 jQuery Plugins that Will Make your Life Easier jQuery has changed the way developers write JavaScript and the way users interact with websites and web applications. If you’re a developer, you know what a pleasure it can be to work with jQuery, especially the convenience of plugins. In this post, we’ve rounded up 10 jQuery Plugins that Will Make your Life Easier. In this collection of plugins, you’ll find a wide range of functionality, from navigation enhancements to image viewing. blur.js blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements. Gips Gips is a clean and simple jQuery plugin and is based on Gips Freebie . Nestable Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin) notify Notify! hammer.js A javascript library for multi-touch gestures TypeButter TypeButter allows you to set optical kerning for any font on your website. Websanova Paint iPicture iPicture is a jQuery Plugin to create interactive pictures with extra descriptions. Adipoli The Wookmark jQuery plugin

Related: