Best jQuery Plugins Plugins & Tutorials with Demo

    Smarttruncation : jQuery Truncates html text Plugin

    Smarttruncation : jQuery Truncates html text Plugin

    jQuery.smarttruncation truncates the text within the assigned element to fit and updates the string length while resizing the window.

    The used technique is very responsive, since it calculates the width for each character in a pre-define set ahead of time. The generated sizes dictionary is cached and re-used if the plugin is called on an element with identical font properties.

    Stairway : jQuery CSS3 Navigation Plugin

    Stairway : jQuery CSS3 Navigation Plugin

    I’d build out an idea for navigation I had. It’s nothing but a visual effect in which the hovered (or active) navigation item becomes the tallest “stair” and other items before and after it step down. It’s simple, but it’s not something you see very often. Probably for one major reason: you can’t select “previous” elements in CSS.

     

    Garlic.js : jQuery Plugin to persist forms data locally

    Garlic.js : jQuery Plugin to persist forms data locally

    Garlic.js allows you to automatically persist your forms’ text field values locally, until the form is submitted. This way, your users don’t lose any precious data if they accidentally close their tab or browser.

    It strives to have a javascript agnostic interface for UI/UX developers that might want to use it. Just add some data-persist="garlic" in your form tags, and you’re good to go!

    jQuery Ajax Loader & Spinner

    jQuery Ajax Loader & Spinner

    The title is fairly generic, so if you have found this, congratulations, your life is about to become far simpler. When working on or with ajax enabled web sites we usually run into the issue of request times, users need to be shown that something is happening in the background and visually we accomplish this with an Ajax Loader. You would have seen plenty of these by now, little animated gifs that give you a sense the web-page is loading something.

    Foresight.js : Viewing high-resolution images like iPad 3

    Foresight.js : Viewing high-resolution images like iPad 3

    Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.

    Features:

    • Request hi-res images according to device pixel ratio
    • Estimates network connection speed prior to requesting an image
    • Allows existing CSS techniques to control an image’s dimensions within the browser
    • Implements image-set() CSS to control image resolution variants
    • Does not make multiple requests for the same image
    • Javascript library and framework independent (ie: jQuery not required)
    • Image dimensions set by percents will scale to the parent element’s available width
    • Default images will load without javascript enabled
    • Does not use device detection through user-agents

    OpenPanel : jQuery Open Responsive Panel Anywhere

    OpenPanel : jQuery Open Responsive Panel Anywhere

    OpenPanel is a jQuery plugin that allows you to open panel at any where in your page, unlimited panels as you want and support for responsive design. With this small plugin you can open more space for your site to add anything you want.

    Features:

    • Open Panels Anywhere in Your Sites.
    • Unlimited Panels
    • Support Responsive Design.
    • Inline Content for SEO Purpose.
    • Support Ajax Content.
    • Four Directions Slide and Fade Effects.

    jQuery text highlighter and filter Plugin

    jQuery text highlighter and filter Plugin

    When someone types anything in it then a set area on your page becomes responsive and only displays part of that area which contains the word or string typed by the user.

    Baraja: A jQuery Plugin for Spreading Items in a Card-Like Fashion

    Baraja: A jQuery Plugin for Spreading Items in a Card-Like Fashion

    Baraja is an experimental and fun jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.

    jQuery TickBack : Plugin to animate the filtering of a list

    jQuery TickBack : Plugin to animate the filtering of a list

    A jQuery plugin to animate the filtering of a list.A proper jQuery version (1.8+), jQuery Transit (currently an unofficial unmerged fork with proper browser support). Also: the items in the list shoudl have the same dimensions. You specify on initial load of the plugin a callback function, which is used to determine if an element on the list should be filtered out.

    VenScrollBar : A jQuery Scrollbar Plugin

    VenScrollBar : A jQuery Scrollbar Plugin

    VenScrollBar is a jQuery plugin that allows web designers to replace the ugly, default OS scrollbar with custom ones that they create. All theming and customizations are done through CSS and the VenScrollBar API . The generated scrollbar completely implements the functionality of a regular scrollbar as well as offers some additional features such as auto-hiding and smooth-scrolling. This plugin is compatible with all the major browsers: IE7 +, FF3 .5+, Opera10+, Chrome5+, and Safari4+.