Best jQuery Web Plugins & Tutorials with Demo

    jQuery Custom preloader effect

    jQuery preloader effect

    In this experiment I would like to show you how to create a custom preloader animation effect with jQuery.

    JSL (JavaScript Loader)

    JavaScript Loader

    Imagine there’s a 4-lane highway between your web browser and the internet itself. This highway is optimize to let pictures, text, and css fly by. But, when it comes to external scripts, the highway creates a toll booth that slows traffic. The worst part is that pictures text, and css caught behind these scripts have to wait until they pass through. JSL is the latest in toll both avoidance. It creates an express lane that lets all pictures, text, css, and external scripts pass by without worrying about toll booths. That means you save time and money on traffic costs 🙂

    jQuery TinySort a sorting plugin

    jQuery TinySort a sorting plugin

    TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

    Create an interactive street view with jQuery

    Create an interactive street view with jQuery

    Earlier this year we were asked to create a website for a Swiss TV documentary about the famous “Langstrasse” in Zurich and its inhabitants. We came up with the idea of giving the user the ability to move through the street and see interesting hotspots connected with the documentary.

    Our plan was to take a common user experience and use it in a refreshing way. Everybody knows how to scroll through a document, whether by dragging the scrollbar, using a mouse wheel or sliding with your fingers. You expect the page content to move up and down, but it’s kind of surprising to move through a street that way.

    How to build a web widget using jQuery

    How to build a web widget using jQuery

    I created some web widgets for the London’s Design Museum and learned a few useful things in the process. Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.

    The interesting points will be:

    • ensure the widget’s code doesn’t accidentally mess up with the rest of the page,
    • dynamically load external CSS and JavaScript files,
    • bypass browsers’ single-origin policy using JSONP.

    Create a Dynamic Scrolling Content Box Using AJAX

    jQuery AJAX Scrolling Content Box

    If you have used Google Reader, then you might have noticed the way Google Reader shows feed items, it loads up few items first when you click on a feed and as you scroll down to view more items, it fetches more items dynamically and adds it to the list.

    Adding a jQuery scroller to your website that supports Ajax

    Adding a jQuery scroller to your website that supports Ajax

    Sometimes, a nice and sharp design is ruined by the addition of a scroller. By default, the OS styles the scroller and that (arguably) makes it look ugly. For this tutorial, I’ll be using a nice little script called fleXcroll and then adding some code to add support for loading content via Ajax. I’ll also be using jQuery, but of course, you can use any other JavaScript framework or just plain old JavaScript.

    Advanced Javascript ColorPicker

    Advanced Javascript ColorPicker

    ColorPicker is an advanced and highly customizable JavaScript color picker that doesn’t rely on any JS frameworks. It can display the entire color palette (~16.78 mil. colors) in 6 different color modes.

    Twisterghost a jQuery console I/O system

    Twisterghost a jQuery console I/O system

    A JavaScript based console I/O system built for module extensions.

    GRADIENTER jQuery elements gradient plugin

    GRADIENTER jQuery elements gradient plugin

    I started to work on WordPress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that that’s very boring to do manually, I’ve decide to write jQuery plugin which will do that job.Gradienter is easy to use, and with small effort you can have really interesting color effect on your page.