jQuery is enormously popular amongst developers. There are several reasons which are concealed behind its success such as its excellent cross browser compatibility,document traversing, event handling easy to use, and many more. Every month we do a roundup of fresh and useful jquery plugins that might be useful for our audience.
jQuery’s name can be somewhat misleading, as the library has little to do with queries. Since its release in January 2006, it’s author John Resig stated, “I was, originally, going to use JSelect, but all the domain names were taken already.”
jQuery’s library is a single JavaScript file, which contains all of its common DOM, event, effects, and Ajax functions. One can include its various functions within a web page by linking to a local copy, or to one of the many copies available from public servers. jQuery has a CDN sponsored by Media Temple. Additionally Google and Microsoft host it as well.
The important source of jQuery plug-ins is the Plugins sub-domain of the jQuery Project website; where there are alternative plug-in search engines that take more of a specialist approach, such as : listing only plug-ins that meet certain criteria (e.g. those that have a public code repository). The tutorials page on the jQuery site has a list of links to jQuery plug-in tutorials under the “Plugin development” section.
Inasmuch , jQuery’s syntax is designed to make it easier to navigate a document and provides capabilities for developers to create plug-ins on top of the JavaScript library. In this article we would like to present users with the New JQuery Plugins for the month of March 2013, which will enable advanced effects and dynamic web pages for every site owner.
1. Chardin.js : Overlay Instructions for Your Apps
Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour). It uses the information mentioned in “custom data attributes” of the given elements. And, once triggered, it activates an overlay that focuses on the element and displays the info with visual guides (that can be positioned however wanted).
[zilla_button url=”http://heelhook.github.io/chardin.js/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
2. Sidr : Create Side Menus with jQuery
Sidr is a jQuery plugin for creating “hidden side menus” on-the-fly. It can be set to be displayed at right or left, a single page can have multiple side menus and offers multiple methods (existing or remote content) for loading the content. For responsive layouts, a Sidr menu can be attached to a button (that is displayed for specific screen sizes with media -queries) and it’ll be a very handy navigation solution for small screens.
[zilla_button url=”http://www.berriart.com/sidr/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
3. ClassySocial : Links to Your Social Profiles in a Slick Way
ClassySocial is a jQuery plugin that lets your site visitors easily see what networks you belong to and visit them in a click of a button. Currently supports Facebook, Twitter, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram and e-mail. Allow your users to see your presence on 11 of the most popular networks instantly with no need for a knowledge of coding! Have links to your social profiles shown in a slick way, sure to impress your users.
[zilla_button url=”http://www.class.pm/projects/jquery/classysocial/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
4. Scroll to Top
ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS color to the activeOverlay setting. ScrollUp is fully customizable through CSS which makes it simple to fit right into your project. Simply target the scrollUp’s generated ID in your CSS file and set your styles. It is released under MIT License.
[zilla_button url=”http://markgoodyear.com/2013/01/scrollup-jquery-plugin/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
5. Swipebox : jQuery Lightbox with Touch Support
Swipebox is a jQuery lightbox plugin that has support for touch eventsand works well in responsive layouts. It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too. The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers. Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar).
[zilla_button url=”http://brutaldesign.github.com/swipebox/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
6. Nested : Gap-Free, Multi-Column Grid Layouts
Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps. The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements. There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout. Its usage is very easy by simply targeting a container element through a jQuery function. And, various options exist for customization like enabling/disabling animation, min. number of columns and more.
[zilla_button url=”http://suprb.com/apps/nested/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
7. Unslider : Tiny and Responsive jQuery Slider
Unslider is a tiny jQuery plugin (less than1kb minified and gzipped) for sliding any HTML content. It adapts to responsive layouts out-of-the-box and arranges itself automatically if the size of each slide is different. The slides can be browsed with the help of a bullet navigation or using keyboards. Optionally, swipe/touch support can be added with jQuery.event.swipe plugin (a plug ‘n’ play solution). Speed and delay of the slides can be defined and it has an API for controlling its functions.
[zilla_button url=”http://unslider.com/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
8. Spectrum : jQuery Color Picker Plugin
Spectrum is a jQuery colorpicker plugin that probably comes with all the features you are looking for.
It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the input[type=color] of HTML5 . The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.
It has support for color palettes by storing/displaying the colors you chose, the default selected color can be set or it can be configured to only display the palette with pre-defined colors.
Alpha transparency selection is available, can be always visible (without clicking to a picker icon) and supports multiple color formats.
[zilla_button url=”http://bgrins.github.io/spectrum/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
9. Spoiler Alert : Hide Spoilers on Site
Spoiler Alert is a happy little jQuery plugin to hide spoilers on your site. Don’t spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click.
To make your site spoiler free, simply include spoiler.js, then, add this somewhere: $(’spoiler, .spoiler’).spoilerAlert(). To control the maximum and partial blurs, you can pass arguments to the function. Spoiler Alert has been tested in Chrome, Firefox, Safari and Mobile Safari.
[zilla_button url=”http://joshbuddy.github.com/spoiler-alert/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
10. jPanelMenu : Create Panel Style Menu
jPanelMenu is a jQuery plugin that creates a paneled-style menu like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications.
Animation is handled by CSS transitions, for browsers with support. CSS transitions are hardware-accelerated on supporting devices, so the animations are silky smooth. For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback.
[zilla_button url=”http://jpanelmenu.com/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
11. TryjQuery : Interactive Challenges & Writing jQuery in the Browser
Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser. You’ll need about 2 hours of time to make it through everything. There is a gentle introduction to what jQuery is, and what it can do.
It tells you how to search and walk through the DOM with selectors and traversing. Add & remove from the DOM, more traversing, and user events. Listen for events, handle them, and change the default event behavior of web browsers. Before landing, tame CSS with jQuery and animate elements on the page.
[zilla_button url=”http://try.jquery.com/” style=”green” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
