jQuery is no stranger to most advanced users and bloggers alike, and many strides in JavaScript adoption by developers and browser vendors, have produced plenty of plugins which have come onto the scene. This is part of the reason as to why jQuery has become one of the most popular and utilized JavaScript libraries available.
jQuery is an expedient and concise library that simplifies traversing HTML documents, event handling, animations, and adding AJAX. jQuery plug-ins offer a vast array of benefits to web designers of all levels of experience.
In this article we would like to present our readers with 10 Fresh and Handy jQuery plugins which will be useful for improving the overall user experience on your website.
1.Progression.js
Progression.js is a jQuery plugin that gives users real time hints & progress updates as they complete forms. All you have to do is to give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression. Once you have created your form you will need to initiate the plugin.
2. jQuery TourBus
jQuery TourBus is a jQuery tour/walkthrough plugin. It takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators and etc. Start by including the jQuery plugin and base styles on your page, of course. Then we can define some ‘legs’ of our tour. Imagine you have a page with some stuff you want to lead the user through. You’ll find the basics of the leg styles (padding, background color, etc) which you can either edit or override in your own stylesheets.
3. Mason.js : Dynamic-Colum & Gap Free Grids
Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly. One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid. It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.
4. Pop Easy
Pop Easy is a jQuery plugin for quickly creating completely customizable modals. The plugin is lightweight (2kb) and has support for displaying any HTML element, including videos. Regarding the design, the default modal already has a good-looking interface and it can be changed/improved with CSS.
5. Smint : Sticky Menu with Smooth Scroll
Smint is a jQuery plugin that can turn any given element into a sticky menu instantly. Also, the plugin has support for smooth scrolling (which is usually used in one-page websites). The plugin is almost plug ‘n’ play and the only customization provided is “scrolling speed”.
6. FlipClock
FlipClock.js is a jQuery plugin which replicates this effect to present anything related to time. It has support for working as a clock, countdown or timer and can be customized completely with CSS. There is an option for auto-start, multiple methods exist for controlling it (start, stop, getTime, setTime..) with their callbacks.
7. Least.js
Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout. The images are displayed from an unordered list where their order is randomized on each load. Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kinda similar to Google Image search).
8. Unveil : Lightweight Version of Lazy Load
Most of us are familiar with the Lazy Load plugin by Mika Tuupola. This is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport won’t be loaded until the user scrolls to them.
Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not going to use any of them you can reduce the file size by leaving just the essential code to show the images. That’s what jQuery Unveil does, it is the lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k.
9. Mmenu : Mobile App like Sliding Menus
jQuery.mmenu is a slick plugin that brings the same behavior into any -mobile- web layout. It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization. The options include the position of the menu (left/right), if a counter for the menu items will be displayed or not and more.
10. jQuery Swatches
jQuery.swatches is a free to use that turns a one-line div into a sweet color swatch. You can customize the class as you want. Using different classes would allow you to render groups of swatches at individual times by calling swatchify() on a different selector.
