8500+ Best jQuery Plugins & Tutorials with jQuery Demo examples 2019

Create an Infinite Scrolling Gallery with jQuery,PHP,Ajax

June 13, 2012 | Ajax, PHP

Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.

Infinite scrolling is where you can keep scrolling and data will keep coming until all the data is displayed. In this technique, the first set of data will be displayed initially. Once you scroll to the end of the window the next page of data will be generated and so on. No pagination buttons are required and you get the data on demand. Let’s see how we can create infinite scrolling.

Read More Demo

Hal Jordan : jQuery Parallax effect plugin

June 12, 2012 | Plugins

A jQuery plug-in for creating a parallax special effect in your page layout.In order to prepare your page for HJ=P, you need to design your graphics with parallax in mind. Primarily this means using a lot of transparent PNGs that can be positioned on top of a large background graphic, similar to how the planets and asteroids on this demo page are arranged on top of the space background. Unfortunately this means you’ll need to come up with an IE-compatible way to manage your PNGs, the precise strategy for which is beyond the scope of this plugin.

My initial goal with writing HJ=P was to create a parallaxing system that uses z-indexes to judge the relative distance between objects, as this is already how web designers are layering their DOM elements on top of each other. It makes sense to leverage the CSS that’s already there.

Read More Demo

MaxImage 2.0 : jQuery Fullscreen Background Slideshow plugin

June 12, 2012 | Gallery, Plugins

MaxImage : jQuery Fullscreen Background Slideshow Plugin

Your site looks impressive when it displays a slideshow background image in the wind and Maximage makes it possible for you.MaxImage 2.0 uses the slideshow power from jQuery Cycle Plugin and allows you to utilize all of the options from Cycle but now for a background slideshow.

MaxImage 2.0 determines whether your browser can use CSS3′s background-size:cover. If it can, it uses it as to limit the amount of heavy lifting that jQuery has to do. That means the majority of your users will have a slim and smooth experience. That is so important with large image animations as it is. (still working on optimizing) If CSS3 is not available it falls back to the old way of sizing and centering background images.

Read More Demo

Collapsible Drag & Drop Panels Using jQuery

June 12, 2012 | Drag & Drop

Drag n Drop panels are great to let the user control how he/she wants to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.

Today, i am going to show you how to create collapsible, drag and drop panels easily using jQuery and jQuery UI libraries. Here’s what the final result will look like.

Read More Demo

JavaScript Mindmap

June 11, 2012 | Core Java Script, SVG Tutorial, Web

Requires jQuery for basic shortcuts ($) and stuff.Requires Raphael for drawing.jQuery UI may be used to allow draggable nodes.The basic principles of a force directed layout controlling nodes are as free as the birds in the trees.It’s relatively easy to build a mindmap. Take a collection of HTML nodes, and position them absolutely. Use a Force Directed Layout to link them together and yet keep them apart.
Once you’ve got that, you need to add some filters, to define which nodes are properly connected. All nodes should repel, to prevent overlap, but connected nodes should have a string between them. This is where you use a springy force (hooke’s law) to pull them together.

Drawing lines in HTML is not an easy feat. IE has/had VML, all browsers (except Android) support SVG (albeit slowly), and all except IE support Canvas. I tried using a diagonal line in a JPG, stretching it to fit. It looks daft. I then switched to Canvas, and now I’m on SVG (using Raphael to support IE VML too). So it works everywhere except Android.

Read More Demo

Annotator : jQuery Copy-Editor of the web

June 11, 2012 | Plugins, Web

Inline annotation for the web in pure Javascript.The Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable.Annotator is a web annotation system. Loaded into a webpage, it provides the user with tools to annotate text (and other elements) in the page.

Annotations can have comments, tags, users and more. Morever, the Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.

Read More Demo

blur.js : jQuery psuedo-transparent Blurred Elements

June 10, 2012 | Plugins

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

Read More Demo

Create an Infinite Scrolling Gallery with jQuery,PHP,Ajax

Hal Jordan : jQuery Parallax effect plugin

MaxImage 2.0 : jQuery Fullscreen Background Slideshow plugin

Collapsible Drag & Drop Panels Using jQuery

JavaScript Mindmap

Annotator : jQuery Copy-Editor of the web

jQuery Sticky Header

blur.js : jQuery psuedo-transparent Blurred Elements

jQuery Plugins Tags