Best jQuery Web Plugins & Tutorials with Demo

    jQuery Resize End Plugin

    jQuery Resize End Plugin

    A tiny plugin to handle events after a (window) resize has been completed.

    onScreen : jQuery plugin do Stuff when Elements are visible

    onScreen : jQuery plugin do Stuff when Elements are visible

    A jQuery plugin that does stuff to elements when they enter or leave the viewport.This is optimal for CSS animations, like the demos section below.

    You can set the tolerance parameter and allow the elements to enter the viewport certain amount of pixels before doing anything.

    Offline.js : Display online/offline Indication to your Users

    Offline.js : Display online/offline Indication to your Users

    Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.

    It captures AJAX requests which were made while the connection was down, and remakes them when it’s back up, so your app reacts perfectly.

    Features:

    • Monitors ajax requests looking for failure
    • Confirms the connection status by requesting an image or fake resource
    • Automatically grabs ajax requests made while the connection is down and remakes them after the connection is restored.
    • Simple UI with beautiful themes
    • 3kb minified and compressed

    PACE : Automatic page load progress bar

    PACE : Automatic page load progress bar

    An automatic web page progress bar.Include pace.js and a theme of your choice to your page and you are done!

    Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.

    If you use AMD or Browserify, require pace.js and call pace.start() as early in the loading process as is possible.

    jQuery Auto Fix Anything

    jQuery Auto Fix Anything

    This little plugin will let you automatically fix position of any container on your website with one JS call.

    Medium-Style Page Transition with jQuery & CSS3

    Medium-Style Page Transition with jQuery & CSS3

    In this article, I will outline how to achieve Medium’s page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

    bs-wizard : jQuery wizard plugin based on Bootstrap

    bs-wizard : jQuery wizard plugin based on Bootstrap

    jQuery wizard plugin based on Bootstrap.Inspired by acc-wizard, this wizard is different from acc-wizard in a few ways:

    1. Source code is CoffeeScript;
    2. Not based on hash when move forward and backward in wizard;
    3. Not based on Bootstrap accordion;
    4. More events and utilize public methods.

    This plugin also includes a beautiful CSS file which is borrowed from acc-wizard, but this is absolutely optional, you can provide your own css style.

    jQuery End Page Box : Displaying a Box at the End of the Page

    jQuery End Page Box : Displaying a Box at the End of the Page

    In this day and age, we are all competing for attention. The longer people stay on your website and drill down to your content, the better. Today, I have decided to implement a plugin called End Page Box that will let you easily show any dialog when the user scrolls to the bottom (or any range) of the page.

    You can use it to recommend other posts on your website, show related posts, or even to annotate the page with extra information which will eventually create a richer and deeper experience for your users.

    This plugin will keep track of your scroll location and whenever you scroll to the specified area, the plugin will automatically display the dialog until you go out of range. The animations available are a combination of jQuery for basic animations such as fade and slide, and CSS3 (defined in endpage-box.css) for more complex ones.

    FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

    FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

    Single page layouts are taking off in a big way. It seems as if every product page nowadays is single paged, so I thought I’d have a little spin at it with this jQuery plugin. This allows you to create single paged layouts with a few optional custom UI elements such as fold up menus.

    I’ve tested this on most major platforms and browsers and it seems to work fine on all of them. The idea is simple, it lets you make a quick single page layout and gives you the option of some UI effects, such as disappearing pieces of image to reveal menus. I’ve also added some options to disable all that if it’s not for you. How does it work? Well let’s have a look.

    Scrolld.js : jQuery Unique Dynamic Page Scrolling

    Scrolld.js : jQuery Unique Dynamic Page Scrolling

    Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.