jQuery By Example

It's been 9 years since the first release of jQuery and since then it has come a long way. And in these years, jQuery has made an immense impact on website development. But it's always exciting to go back to history and find out how it started. Recently, John Resig (jQuery creator) annotated the first known copy of jQuery’s source code and shared his memories.

I've annotated the original 2006 version of jQuery and put it online: http://t.co/5sKTJ7HlhN Lots of memories and interesting hacks!
— John Resig (@jeresig) April 7, 2015

Below are some interesting unknown facts of jQuery, I came to know from reading Resig’s annotations.

jQuery was originally called "JSelect" (for selecting elements out of the page, plus it started with JS, which was nice). However the domain name jselect.com wasn’t available, thus jQuery it was.
There apparently was another project (a Java SQL library) named jQuery. But John Resig only found this out later after he was contacted by them about the name conflict!
The public announcement of jQuery was in January 14, 2006 at BarCamp NewYork.
jQuery was inspired by following open source projects.
The first release of jQuery didn’t include any Ajax functionality! jQuery 1.0 had Ajax built-in natively.
The first jQuery plugin was created by Michael Geary on January 25th, just 11 days after the first release of the library (even before this particular version of the file!): JSON for jQuery
The original version of jQuery supported IE 5. But this was dropped very soon and ""upgraded"" to IE 6.
There were no optional curly braces used in initial release of jQuery. You will find such code in first version of jQuery.
```
if ( !b )
  for ( var j in a )
    this.style[j] = a[j];
else
  this.style[a] = b;
```
jQuery had proper method chaining from the very beginning. The chaining in jQuery has gone on to influence a large number of other libraries, even in other languages, which is pretty cool. It even included new conventions like .end() which allowed you to “pop” off of the chain stack.

The first release also had a check to include jQuery library after the prototype library.

setTimeout(function(){
   if ( typeof Prototype != "undefined"&& $.g == null && $.clean == null )
     throw "Error: You are overwriting jQuery, please include jQuery last.";
 }, 1000);

You can find all the thoughts and memories around the release of the code at Genius put by John Resig. And you can also take a look at original version of the jQuery site

You may also like:

Feel free to contact me for any help related to jQuery, I will gladly help you.

Any good web developer or designer has a web presence of their own and whether you are applying for a full time position or a freelance gig, having an impressive website can close the deal. One important aspect is making sure the design of the site is up to presence web standards. And that means taking advantage of some off the shelf jQuery that can enhance things.

Make your portfolio site stand out with these cool jQuery plugins.

Arctext.js

Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.

CollagePlus

Every development or design portfolio needs a good looking gallery. CollagePlus arranges your images in a clean grid within a container. There are several different options for customizing image hover and load effects.

Swipebox

Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.

Adipoli 2.0

Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.

Spectragram.js

Arctext is a fun little plugin that allows you to curve a line of text using jQuery. You can customize both the radius and the direction of the curve, and even animate the curve effect.

1. Prideify.js
https://github.com/alexpeattie/prideify

Prideify.js is inspired by facebook.com/celebratepride - a super-lightweight library (~100 lines of code) to prideify any image using the element.

2. PixelFlow.js

http://devnimlos.com/professional/pixelflow

PixelFlow is a jQuery plugin which can pixelate your image using canvas. It supports various option for pixelation like gradient, wave and many more.

3. jQuery Bloodforge Smoke Effect

https://bloodforge.com/post/the-jquery-bloodforge-smoke-effect

jQuery Bloodforge Smoke Effect plugin lets you to add a smoke effect background to any HTML element on the page.

4. Raindrops.js

http://daniellaharel.com/raindrops/

Raindrops.js is a jQuery plugin to create raindrop effect on water. There are lots of option/settings to customize this plugin.

5. PreviewTube.js
https://github.com/vool/PreViewTube.js

A small jQuery plugin for animating YouTube thumbnails.

6. Overlapping Letters.js

http://codepen.io/jhawes/pen/JogrLZ

Overlapping Letters is a jQuery plugin that automatically adds span tags to letters by using javascript.

7. Birdman.js
https://github.com/chrisma/birdman.js

A jQuery plugin to animate text as in the credits of the 2014 movie "Birdman".

8. WebSnowjq.js

http://technoplugin.com/WebSnow

WebSnowjq.Js is a jQuery plugin made using HTML5 and javascript to create a virtual snow fall on a web page. WebSnowjq.Js is compatible with all browsers supporting HTML5. No effort is required to integrate WebSnowjq.js in a website.

9. Particles.js

http://vincentgarreau.com/particles.js/

Particles.js is a lightweight javascript library for creating particles.

10. jQuery Rippel

https://github.com/sirxemic/jquery.ripples

jQuery Ripples is a plugin to add a layer of water to your HTML elements which will ripple by cursor interaction with WebGL.

We can simply parse the current URL elements using window.location JavaScript object. Window.location object contains information about the current URL. For example, to find out protocol in the URL, we can simply use.

var sProtocol = window.location.protocol;

But let’s say you have URL in a string variable or assigned to any DOM element like anchor tag, then window.location is not going to help you. For example, for following URL you want to parse all the elements like protocol, host name, hash, query string parameter etc.

var sURL = “http://jquerybyexample.net/codes/code-repository?id=12#top”;

In first place, you will definitely look for regex on the web to parse each element. But jQuery can help you here with very simple coding. The solution is to create a new anchor tag using the URL.

$(document).ready(function () {
    var url = 'http://jquerybyexample.net/codes/code-repository?id=12#top';
    //Create a new link with the url as its href:
    var a = $('', { href: url});
    var sResult = 'Protocol:' + a.prop('protocol') + '
'     + 'Host name: ' + a.prop('hostname') + '
' 
    + 'Path: ' + a.prop('pathname') + '
' 
    + 'Query: ' + a.prop('search') + '' 
    + 'Hash: ' + a.prop('hash');
    $('span').html(sResult);
});

Demo at following link. http://jsfiddle.net/jquerybyexample/uh99dfa9/

These days having a responsive website is must as many users use their smart phones to perform all their online activities, rather than desktop. So in this post, find a compiled list of 10 jQuery plugins to make your website responsive. The list includes plugins which can make your images, menu, lightbox and sliders responsive. Enjoy.

1. responsively-lazy
https://github.com/ivopetkov/responsively-lazy

responsivelyLazy is a nice lazy loading implementation that is responsive, truly lazy and SEO friendly. It works quite well with modern browsers and also handles mobile orientation while showing the image.

2. Responsive Multi Menu

https://github.com/oncebuilder/responsive-multi-menu

Responsive multi menu provides easiest way to develop site with multi level navigation and user-friendly experience it has been optimized for mobile devices using HTML5, CSS3 and jQuery.

3. zenith-slider

https://github.com/zutigrm/zenith-slider

Zenith slider is responsive slider jQuery plugin that comes in 4 basic layouts. 4-th layout, or slider layout, has some variations of its own, producing 3 more pre-defined sub-layouts and unlimited possibilities of styling, editing and creating some of your own variations. Zenith also comes with 7 transition animation and unlimited possibilities of styling and creating your own variations.

4. Simple Lightbox

http://andreknieriem.de/simple-lightbox/

Simple Lightbox is a touch-friendly image lightbox for mobile and desktop with jQuery. It’s responsive, touch friendly and easy to install.

5. jPicture
https://github.com/oliver-j/jPicture

jPicture is a jQuery plugin to load pictures on the right view port. jPicture loads only the most fitting picture out of the picture-versions for the viewport the page is displayed on.

6. Before-after

https://github.com/jotform/before-after.js

before-after.js is a simple and responsive image comparison slider.

7. FocusPoint
https://github.com/jonom/jquery-focuspoint

FocusPoint is a jQuery plugin for responsive cropping. It dynamically crop images using focus points to fills available space without cutting out the image's subject.

8. Respontent

https://github.com/BeSite/jQuery.respontent

Respontent is a jQuery plugin that automatically makes your user generated content responsive. It supports images, YouTube videos, Google map and tables.

9. fontFlex

https://github.com/nathco/jQuery.fontFlex

fontFlex is a lightweight jQuery plugin for dynamically changing font sizes according to screen / browser width. Intended to be used with responsive or adaptive CSS layouts.

10. PgwMenu

https://github.com/Pagawa/PgwMenu

PgwMenu is a responsive menu for jQuery with following features. It’s fully responsive, customizable, SEO compliant and smaller in size.

Lightbox is great way to display large images on modal window and if you wish to have a lightbox which works not only on desktop but also on tablets and smart phones. And for that you need a responsive lightbox plugin. So in this post, find a compiled list of 12 responsive jQuery lightbox plugins which supports images, YouTube videos, iframes and any kind of content. Enjoy.

1. LightCase

https://github.com/cbopp-art/lightcase

Lightcase is a flexible, responsive and extendable lightbox plugin based on the jQuery Framework, uses CSS3 for all its transitions. It works fine in all common browsers like Internet Explorer 7+, Firefox, Opera, Webkit and more.

2. Chocolate

http://chocolat.insipi.de/

Chocolate is a responsive jQuery lightbox plugin that is powerful and easy to use. Chocolat.js enables you to display one or several images staying on the same page.

3. jQuery.TosRUs

http://tosrus.frebsite.nl/

jQuery.TosRUs plugin is a great lightbox alternative for scrolling/swiping through any kind of content. It works quite well on a desktop, tablet or smart phone, inside a HTML element or as a lightbox popup. It's responsive by default.

4. Simple Lightbox

http://andreknieriem.de/simple-lightbox/

Simple Lightbox is a touch-friendly image lightbox for mobile and desktop with jQuery. It’s responsive, touch friendly and easy to install.

5. Strip
http://www.stripjs.com/

Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

6. Rebox

http://trentrichardson.com/examples/jQuery-Rebox/

jQuery Rebox is a small, lightweight, responsive lightbox that uses delegation. Instead of using a ridiculous amount of JavaScript to restrict image sizes within the window, Rebox uses css max-width. The design requires no images, although if you want to reskin it you can. This keeps the library clean, and simple.

7. Image LightBox
http://osvaldas.info/image-lightbox-responsive-touch-friendly

Image Lightbox is an ascetic, minimalistic, extensible & configurable, responsive and touch-friendly, iOS, Android and Windows Phone compatible lightbox plugin. Silently preloads next image, uses CSS transform and transition, interacts with keyboard.

8. SmoothBox

https://github.com/kthornbloom/Smoothbox

Smoothbox is a simple, lightweight, and responsive jQuery lightbox plugin. It uses CSS3 transitions for smoother effects.

9. FeatherLight

http://noelboss.github.io/featherlight/

Featherlight is a very lightweight jQuery lightbox. It's very, very lightweight. 400 lines of JavaScript, 100 of CSS, less than 6kB combined. It's smart, responsive, supports images, Ajax and iframes out of the box and you can adapt it to your needs.

10. flipLightBox

https://github.com/flipGallery/flipLightBox

flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional style sheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes. Another optional feature is a toggled slide text bar and navigation to accompany the lightbox images.

11. Magnific Popup

http://dimsemenov.com/plugins/magnific-popup/

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

12. SwipeBox

http://brutaldesign.github.io/swipebox/

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet. It provides swipe gestures for mobile, keyboard Navigation for desktop, CSS transitions with jQuery fallback, retina support for UI icons and easy CSS customization.

Showing password as and when user is typing is you see a lot these days on various smart phones app and mobile device specific websites. As it gives indication of what user is typing on small devices where keys can be mixed easily. So in this post, you will find the solution of how to implement the same feature using jQuery and without any jQuery plugin. So let’s start.

HTML Code

First, let’s see the html part. Define a span element just below your password input control or you may also have next to it. Place the span as per your design requirement and keep it hidden. And also define a checkbox with default state to checked.

Password: <input type="password" id="txtPassword" />
<span id="spnPassword" style='display:none;'></span>
<input type="checkbox" id="chkShow" checked />Show Password

jQuery Code

On jQuery side, attach a keyup event on the password input control. This keyup event first checks if show password checkbox is checked. If yes, then copy the password control value to span and display it. Otherwise hide the span element.

 $('#txtPassword').keyup(function () {
     var isChecked = $('#chkShow').prop('checked');
     if (isChecked) {
         $('#spnPassword').html($(this).val());
         $('#spnPassword').show();
    }
     else $('#spnPassword').hide();
 });

Another thing we need to do is to show/hide the span element based on checkbox status. So attach a change event to checkbox and based on its checked status show/hide the span.

$('#chkShow').change(function () {
        var isChecked = $(this).prop('checked');
        if (isChecked) {
            $('#spnPassword').show();
        } else {
            $('#spnPassword').hide();
        }
    });

So complete code is,

$(document).ready(function () {
    $('#txtPassword').keyup(function () {
        var isChecked = $('#chkShow').prop('checked');
        if (isChecked) {
            $('#spnPassword').html($(this).val());
            $('#spnPassword').show();
        } 
        else $('#spnPassword').hide();
    });
    $('#chkShow').change(function () {
        var isChecked = $(this).prop('checked');
        if (isChecked) {
            $('#spnPassword').show();
        } else {
            $('#spnPassword').hide();
        }
    });
});

See Complete Code

Instagram is the most popular online photo-sharing and social networking service which allows users to take a picture, apply a digital filter to it, and share it on a variety of social networking services. Instagram is fast, beautiful and fun way to share your photos with friends and family.

So In this post find list of jQuery Instagram plugins that will allow you to pull in your own Instagram pictures, tag specific photos.

1. Instafetch

https://github.com/d4nyll/instafetch

instafetch fetches media from Instagram based on (and only on) the user and/or tag, relying on the Instagram API.

If you use the Instagram API to make a call, you will only get 33 results back, no matter what you specify in the count paramter. Instafetch will help you fetch more media than the limit imposes, in exchange for more API calls, which can count against your hourly limit.

2. jQInstaPics

http://projects.craftedpixelz.co.uk/jqinstapics/

jQInstaPics is a simple jQuery plugin that enables you to display the latest pics from your Instagram feed on your website or blog.

3. Instagram Infinite Scroll

https://github.com/DDKnoll/Instagram-Infinite-Scroll

Instagram Infinite Scroll is a single page Infinite Scroll app built using jQuery, and CSS.

4. Instagram Lite

https://github.com/michael-lynch/instagram-lite

A simple, lightweight jQuery plugin used to display a user's Instagram photos.

5. Spectragram

http://lab.adrianquevedo.com/jquery-spectragram/

An easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site.

6. pongstagram.js

https://github.com/pongstr/pongstagr.am/

Pongstagr.am is a jQuery plugin that lets you display your Instagram media to your website using Bootstrap Front-end styles and modal-plugin.

7. InstaStream

https://github.com/exibit/Instastream

Instastream is a simple jQuery plugin to stream pictures from Instagram.Before to go further be sure you have an Instagram account and an Instagram API Key.You can choose how many pictures you want by slide.

8. InstaSlider

https://github.com/christill/instaslider

jQuery InstaSlider is a lightweight (just 2kb when minified!) jQuery image slider / carousel plugin that populates content from an Instagram hashtag or username.

Hope you find this list useful!!!!!

Google’s material design is becoming popular due to better user experience, eye catching animations and its simplicity. In this post, find a complied list of jQuery plugins which have created material design effects. These plugins provides material design effects to progress bar, buttons, charts, timer, stopwatch, notifications and input controls.

1. Material PreLoader

https://github.com/aarondo/Material-Preloader

Material Preloader is a jQuery plugin that recreates the Material Design preloader (as seen on Google inbox).

2. Material Design Stopwatch, Alarm and Timer

http://tutorialzine.com/2015/04/material-design-stopwatch-alarm-and-timer/

A small JavaScript application that conforms to Google’s material design guidelines. It consists of three parts – an alarm clock, a stopwatch and a timer. The application is responsive and has a bunch of subtle animations that react to user input.

3. SnackbarJS
https://github.com/FezVrasta/snackbarjs

SnackbarJS is a lightweight and jQuery powered plugin to create Material Design snackbars and toasts with ease. It made to work in Bootstrap style, just like the Bootstrap tooltips work.

4. MProgress.js

https://github.com/lightningtgc/MProgress.js

MProgress.js is a Google Material Design Progress linear bar by using CSS3 and pure JavaScript.

5. Material Spinner
http://adcentury.github.io/material-spinner/

A jQuery plugin used to create a Google Material Design inspired loading spinner using SVG and CSS3 transforms.

6. Material Design Styled Pie Menu
http://codepen.io/wbarahona/pen/xbReKY

A Google Material Design styled pie menu for navigation in webpage. It opens a sub-menu when clicked or tapped, built with jQuery and CSS3 transitions & transforms.

7. legitRipple.js

https://github.com/matthias-vogt/legitRipple.js

A lightweight, CSS based jQuery plugin for material-design ripple effects.

8. ToggleSwitch

https://github.com/sagark1510/ToggleSwitch-Jquery-plugin

Simple ToggleSwitch Jquery plugin with Material design style.

9. Material Charts

https://github.com/jacobnisnevich/material-charts

Material Charts is a lightweight jQuery plugin helps you create nice, clean, Material Design styled charts / diagrams with plain html, CSS and JavaScript.

10. Google Material hamburger button

http://codepen.io/kabadesu/pen/qvdzK

Google material designed hamburger button created using jQuery and CSS 3.

In this post, find a complied list of jQuery plugin to integrate flip animations. These plugins provides flip effects to images, text, image gallery, clock and any DOM element.

1. flipLightBox

flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional stylesheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes.

2. FlipClock.js

FlipClock.js is a jQuery plugin with CSS3 animations to add counter, timer and clock with smooth flip effect.

3. flipGallery

flipGallery is a free jQuery powered photo gallery with sleek flipping transitions between thumbnails and lightbox enlargements. Other features include dynamic image streaming, auto pagination, auto cropping and transparent image overlay. It only takes a few minutes to set-up and the layout, speed, co-ordination and text can easily be modified in the settings.

4. Flip

Flip is jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the "slide" effect will be selected forecely.

5. flipCountDown

flipCountDown is a jQuery clock / timer / countdown plugin in retro flip-count down style.

6. Flip Quote

jQuery Flip Quote creates a pull-quote from a text quote found in the document and flips to reveal the quote once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

7. Wodry

Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.

8. justFlipIt

justFlipIt is a lightweight jQuery plugin that allows you to implement CSS3 based flip animations on any DOM elements.

9. Cover3D

Cover3D is a super tiny (~2kb unminified) jQuery plugin used to create 3D cover flip animations using CSS3 rotate and translate transforms.

10.jQuery Flipper

jQuery flipper is jQuery & jQuery UI based plugin which allows you to rotate an Html element using CSS3 3D transforms.

Social presence for any website is must. And you need to give your users a way to share the content on various social platforms. In this post, find a list of jQuery plugins to add social share buttons in your websites. These social share buttons supports Facebook, Twitter, Google+, Pinterest and Linked-In. These plugins are pretty easy to understand and integrate.

1. GoodShare.js

Useful jQuery plugin that will help your website visitors share a link on social networks and micro blogs or mobile messengers. Easy to install and configuring on any of your website!

2. jumboShare

Jumbo Share is a jQuery plugin that add social share buttons on your website with a jumbo sized counter.

3. Likely

Likely is the social sharing buttons that aren't shabby. It supports Twitter, Facebook, Google Plus, Pinterest.

4. jsSocials

jsSocials is a simple social network sharing jQuery plugin. It's flexible and easily extensible. Configure visual appearance. Choose one of several themes provided. Add any yet unsupported social network if needed.

5. socialShare.js

A jquery plugin to provide more control on social sharing buttons. Do the styling without worrying about the javascript implementation.

6. Awesome Share Button

A jQuery plugin to create social media share button with share count.

7. Cool Social Buttons

Cool Social Buttons is a jQuery plugin that adds social sharing buttons to your site without slowing it down. It is easy to use, powered by CSS3, mobile friendly and fully customizable.

8. prettySocial

jQuery prettySocial - a custom share buttons for Pinterest, Twitter, Facebook and Google Plus.

9. RRSSB

Ridiculously Responsive Social Sharing Buttons is built with SASS, and provides customizable responsive social share buttons.SVGs allow for tiny file size and retina support.

10. Share Button

Share Button is simple, light, flexible, and good-looking share button. It doesn't load any iframes or extra JavaScript making the overall load time much faster. It looks simple and clean by default, and can be customized in any and every way.

In this post, find a list of jQuery plugins to enhance your HTML tables. Using these plugins you can redesign your table, create a table from CSV or JSON, apply sorting and filtering the table content, freeze your table header row and create responsive tables.

1. Tabulator

Tabulator is an easy to use table generation jQuery UI Plugin. Tabulator allows you to create a table within seconds from any JSON formatted data. It is not dependent on any external CSS or images, simply include the library in your jQuery UI project and you're away!

2. KingTable

KingTable is a jQuery plugin for administrative tables that are able to build themselves on the basis of their input data. It supports client and server side pagination, client and server side search, custom filters views, and an automatic menu to hide and reorder columns and support for custom tools. Client side export feature into: CSV, JSON, and XML formats.

3. jQuery Responsive Tables

jQuery responsive table is a lightweight jQuery plugin that allows table markup to become fully responsive. It provides a clean list view via devices with small screens. It can work for multiple tables on a single page, as well as with tables that contain various combinations of merged cells. Best of all, it uses pure CSS for the rendering.

4. csv2table

csv2table is the jQuery plug-in that reads the CSV file, and generates an HTML table.

5. StickySort

StickySort is a jQuery plugin for adding sticky headers and columns to your tables, complete with an extended sorting function.

6. Columns

Columns is an easy way of creating JSON data into HTML tables that are sortable, searchable, and paginating. All you need is to provide the data, and Columns will do the rest.

7. jsGrid

jsGrid is a lightweight client-side data grid control based on jQuery. It supports basic grid operations like inserting, filtering, editing, deleting, paging and sorting. jsGrid is tuneable and allows to customize appearance and components.

8. Responsive Tables

A 2kb jQuery solution for tables in responsive designs. A great way to deal with responsive tables is to reformat the related information cells into grouped blocks in mobile view.

9. Freezeheader

Freezeheader is a simple jQuery plugin to freeze the header row in html table. It's also known as fixed header table.

10. WATable

WATable is a customizable jQuery table plugin with sorting, paging, filtering.

In this post, find a compiled list of latest interesting jQuery plugins. These plugins are fresh, interesting, simple and lightweight. You may find them useful for your next project!

1. Descartes

Descartes is just over 30KB when minified and just over 300 lines of code. It's written entirely in JavaScript with its one dependency, Sizzle, baked in. It works really well with some of your favourite libraries, and especially jQuery.

2. easypin

easypin is a simple and fast jQuery image pinning plugin. There are dependencies with the library jQuery easing plugin.

3. dynamicColorPage

dynamicColorPage is a jQuery plugin that lets user change the colour style of your page dynamically. The user gets a small widget on the right hand side that can be used to change default colour, so that the appearance of the whole page will change.

4. Features.js

Feature.js is a fast, simple and lightweight browser feature detection library. It has no dependencies and weighs only 1kb minified and gzipped. Feature.js automatically initializes itself on page load, so you don’t have to. It doesn’t, however, run any tests while initializing, so it will only ever run them when you ask it to. This makes it perform very fast.

5. Adi.js

Lightweight jQuery plugin for Adblock detection.

6. screenlog.js

Ever faced a situation where you said "Why doesn't this bug show up when developer console is open!!"? And since the bug doesn't show when you have console open, you cannot do debug logging using console.log.

Enter screenlog.js. screenlog.js brings the developer console right on your screen so that you can do logging without having the developer console open.

7. Crotator

A jQuery plugin for creating a slider or content rotator. It converts the children inside any selected element into a Slider. One can define array of timeline according to which the slider will be synced. CSS animations can be used with this plugin to enhance the contents visually.

8. eventPause.js

eventPause is a tiny plugin with lots of methods to control events, so whenever you want you can pause and activate any event.

9. jQuery Sequency

jQuery Sequency is a jQuery plugin for before/after image comparison on scroll.

10. pageSwitch

pageSwitch is a javascript library to create page switch effects. It supports 121 switching animations.

In this post, find a compiled list of 15 jQuery plugins that can be used to create sticky headers, footers, sidebars or navigation. Some of the plugins in list below allow you to stick any DOM element. These plugins are light-weight and easy to integrate.

1. Headhesive

Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic.

2. Midnight

A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it.

3. MakeFixed.js

MakeFixed.js is a jQuery plugin to dynamically set up elements to be fixed during scroll. It's lightweight and allows callback functions.

4. Sticky-Kit

Sticky-Kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

5. stickUp

stickUp is a jQuery plugin that "sticks" an element to the top of the browser window while scrolling, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.

6. StickyStack.js

StickyStack is a jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.

7. Slinky.js

Slinky.js is a jQuery plugin to create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times.

8. Headroom.js

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

9. Stickr.js

Stickr.js is a jQuery plugin that helps you create multiple sticky elements on a page and comes with a robust set of options that allows anyone to make it work great on their setup.

10. Headtacular

Headtacular is a nice minimalist sticky header a jQuery plugin.As the user scrolls, the script will check if they have scrolled past the scrollPoint. If so, it will add the CSS class .is-stuck to the targeted object.

11. Sticky Header

It's a simple jQuery plugin for making sticky header.

12. Stick Em Up!

Stick Em Up is a jQuery plugin that provides easy way to determine when an element has been reached, passed, and passed back.

13. HC-Sticky

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float. It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of an empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

14. stickyNavbar.js

stickyNavbar is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling.

15. sMint

Smint is a simple jQuery plugin that helps with the navigation on one page style websites. It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.

In this post, find a compiled list of jQuery plugins to integrate Vimeo videos in your website. These plugins allow you to create Vimeo background as video, customize them, create Vimeo videos playlists, embed them easily in your website, create animated video thumbnails and more.

1. Vimeofy

Vimeofy is a simple, lightweight jQuery plugin which uses a Vimeo video as the background of any container element.

2. Vimelar

Vimelar is a jQuery plugin that allows Vimeo videos to be used as full screen backgrounds on your websites.

3. Vimeo API

Vimeo.API.js is a lightweight jQuery wrapper around the Vimeo video API which allows you to control Vimeo videos embedded in your webpage with custom jQuery methods and events.

4. Vimeo Cover

vimeo-cover.js is a lightweight jQuery plugin that helps embed a Vimeo video with custom cover image into your webpage. Only when the cover is clicked does it fetch the iframe Vimeo player.

5. Smart Vimeo Embed

Smart Vimeo Embed is a jQuery plugin that makes it easy to embed the Vimeo videos with thumbnails on your website, just by adding their id to the data-vimeo-id attribute.

6. Vimeo Carousel Gallery

Compile videos from Vimeo into a chic gallery with jQuery. Unlike Youtube, Vimeo does not allow you to create custom playlists to display your videos. A plugin that creates a carousel with information coming from Vimeo when passing a list of video URLs, and videos can be seen prominently on the page.

7. PreVideoLoad

PreVideoLoad is a super tiny jQuery plugin that gets and displays thumbnail previews of the Vimeo videos on the web page. When you click on the play button, the preview image will be replaced by the auto playing iframe Vimeo video.

8. Video Lightning

Video Lightning is a highly customizable jQuery lightbox plugin that allows you to play Vimeo videos in a stylish lightbox interface.

9. jQuery Video

This video plugin for jQuery allows you to control HTML5, Youtube and Vimeo videos with the same functions and the same syntax.

10. Plyr

A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

Single page applications or one page scroll websites are new and very popular trend these days. These websites look quite attractive while using vibrant colors to catch the attention of the user. In this post, find a compiled list of 13 jQuery plugins to create one page scroll website or give feel of SPA. These plugins are tiny, easy to use and support various HTML elements to implement one page scroll.

1. fullPage

fullPage is a simple and easy to use plugin to create full screen scrolling websites (also known as single page websites or one page sites). It allows the creation of full screen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

2. StackPage

Stackpage is a very small jQuery one page scroll plugin which enables you to scroll through a group of fixed page sections just like stacked cards.

3. SingleFull

A simple jQuery plugin to create full page scrolling effect for your full screen pages or single page web application.

4. AppLikeOnePage

AppLikeOnePage.js is an easy-to-use jQuery plugin for quickly building one page layout without the scroll bar. By supporting basic keyboard browsing, this handy JavaScript function helps not only create a stylish and app-like web page swiftly but also enhance web accessibility thus bring about a better user experience.

5. SectionScroll

SectionScroll is a lightweight jQuery plugin for automatically generating a side bullet navigation on your one page scrolling website. Click on the navigation to scroll smoothly through different sections, automatically selects the correct navigation items.

6. SmartScroll

SmartScroll is a responsive and lightweight jQuery plugin that provides smooth full screen page scrolling with support for auto hashing and scroll snapping behavior.

7. Scroller

Scroller is a simple lightweight jQuery plugin made for one page website or SPA applications. It adds a sticky navigation menu which allows to navigate between different sections of website pages.

8. Rustic

Rustic is a simple albeit powerful jQuery plugin for creating elegant page by page scrolling.

9. magneticScroll

magneticScroll is a lightweight, cross-browser compatible and customizable jQuery plugin to implement one page scroll. It works on any HTML element and supports mouse scroll & arrow keys interaction.

10. Alton

Alton is a jQuery-powered scrolling plugin that utilizes custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes the whole scrolljacking idea, but greatly improves upon the often-poorly-implemented scrolljacking experiences you might be used to.

11. Stacks

Stacks is a simple jQuery plugin used to reveal stacked content sections when vertical page scrolling.

12. RowScroll

RowScroll is a super tiny (1.5kb) jQuery plugin which automatically scrolls visitors up and down to different vertical sections of your webpage when they use their mouse scroll wheels, track pads, and finger swipes on mobile devices for your one page website and single page applications.

13. OnePageR

OnePageR is lightweight jQuery plugin which offers single page slides template with minimal code, maximum flexibility, full screen slides and support arrow keys as well.

These days almost all the websites are using cookies to store information in your browser. And as per the EU cookie law, it is advisable to let your user know that your website is creating cookie. In this post, find a complied list of 10 lightweight and customizable jQuery plugins to display cookie law notification. These plugins allows you to display notification on top of the page or on bottom of the page.

1. herbyCookie

herbyCookie is a simple, customizable jQuery plugin that displays an animated EU cookie disclaimer bar at the bottom of the web page and stores the 'Accept' state in the local storage using HTML5 web storage API.

2. Cookiefy

A jQuery based EU Cookie Law Notification Plug-in for alerting the users about the use of cookies on your website that help you comply with the EU Cookie Law.

3. Qookies

Qookies is a jQuery plugin that displays your cookies disclaimer in a popup window to make your website comply with the EU cookie law.

4. CookieDisclaimer

Cookie Disclaimer is a lightweight jQuery plugin which loads a disclaimer bar where you can show some custom text and buttons. You can choose style, buttons classes and id, cookie expire time, cookie name and more. This plugin provide also some useful methods and ready to use buttons for several uses.

5. CookieBanner

CookieBanner is a jQuery plugin that displays customizable and dismissible EU Cookie Law Notice on your web page.

6. Cookies Message

Cookies Message is a really simple and fully customizable jQuery plugin to easily show the EU Cookies Law banner on the website. It is responsive and supports custom cookie expire time to remember the user's choice.

7. EU Cookie Law popups

An easy-to-install jQuery plugin to create EU Cookie Law popups. It supports multiple layouts out of the box. Works well with Bootstrap 3. Easy to customize markup and CSS.

8. Divas Cookies

Divas Cookies is EU Cookie Policy Banner generator as a jQuery plugin. The quickest and most elegant solution to be compliant with EU Cookie Policy. Easily and fully customizable to get the look & feel of any website.

9. cookieBar

cookieBar is a simple, lightweight jQuery plugin for creating a notification bar that is dismissible, and the dismiss is saved by cookie. Perfect for implementing the new EU cookie law!

10. CookieCuttr

CookieCuttr is a tailorable jQuery plugin to deal with the EU Cookie Law.

In this post, find a compiled list of 12 jQuery image crop or resize plugins. These plugins comes with easy to use interfaces to crop images, and they also support responsive cropping, image uploading and drag and drop of selected area for cropping, live preview and touch gestures.

1. Cropper

Cropper is a jQuery plugin for image cropping which supports live previews and custom aspect ratios. The plugin displays a resizable grid on top of an image, allowing to visually resize and crop the image.

2. Responsive Cropper

Responsive Cropper is a jQuery plugin that lets you select an area from an image and prepare crop information to send it to the server. You don't need to trigger any event to update the crop area when an image is resized: this plugin is fully responsive. Crop area uses percentages to guarantee full responsiveness, while crop data is stored separately in absolute values.

3. CropIt

CropIt is a jQuery plugin for image cropping and zooming. It loads images locally via FileReader, and crops them using canvas. It works on desktop and mobile with touch support.

4. Cropbox

Cropbox is a lightweight jQuery image cropping plugin that creates a viewport around a given image allowing to move, zoom, resize and crop an image.

5. Select Areas

Select Areas is a jQuery plugin that let you select multiple areas of an image, move them and resize them.

6. easyCrop

easyCrop is a jQuery plugin used to effectively resize and crop an image. It doesn't allow the user to crop the image but based on the settings it displays the cropped image on screen.

7. imgFitter

imgFitter is a lightweight jQuery plugin used to resize and crop images dynamically. This allows images to fit any web layout while maintaining aspect ratio & centering.

8. Simple Cropper

Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application. It uses HTML5 canvas and CSS3 to create cropped images, so it only works on latest browsers.

9. Drag'n'Crop

Drag'n'Crop is a jQuery plugin for cropping images by dragging, inspired by Facebook cover photo. It aims to be minimalistic and very easy to use for the end-user. It allows to crop the image only in one dimension (no zooming!)

10. Croppic

Croppic is an image cropping jQuery plugin that will satisfy your needs and much more. It is supported on all current browsers, such as Chrome, Firefox, IE, Safari and Opera.

11. SmartCrop

Smartcrop.js implements an algorithm to find good crops for images. It can be used in the browser, in node or via a CLI. It uses fairly simple image processing and a few rules to attempt to create better crops of images.

12. PhotoClip

PhotoClip is a jQuery image cropping plugin that allows to zoom, rotate and crop your image with support for touch gestures.

Here are 8 handy jQuery code snippets for handling images. These snippets show how to handle broken images, showing loading images when the main image is downloading, preloading images, adding hyperlinks to your images, and changing images extensions.

1.Hide Broken Images

If the image path is changed then the image will not load. So you can hide such images from your webpage using following jQuery code.

$(document).ready(function() {

$('img').error(function() {

$(this).hide();

});

});
</pre>

2.Remove Broken Images

You can also remove such images from DOM using following code:

$(document).ready(function() {

$('img').error(function() {

$(this).remove();

});

});
</pre>

3. Replace Broken Image URL with Other Image URL

And if you don’t wish to hide/remove the images and want to replace with any other image source, then use following code. This will set the src attribute of image a to newer path.

$(document).ready(function() {

$('img').error(function() {

$(this).src = "/images/noimage.gif";

$(this).onerror = "";

});

</pre>

4. Add Hyperlinks to All Images

If you want to add hyperlinks to images then use below code:

$(document).ready(function() {

$('img').each(function ()

{

var currentImage = $(this);

currentImage.wrap("<a href='" + currentImage.attr("src") + "'</a>");

});

});</pre>

5. Show Loading Image when Main Image is Loading

If you have large images on your websites and that take time to load, then you can display a small loading image until the time image is fully loaded. The below jQuery code will display a single loading image for all large images.

$(document).ready(function(){

$('#imgLoader').show();

var totalImages = $(".imgClass").length;

var iLoaded = 0;

$(".imgClass").each(function ()

{

$(this).bind("load", function()

{

iLoaded++;

if(iLoaded == totalImages)

{

$('#imgLoader').hide();

}

$(this).attr('src', $(this).attr("src"));

});

<pre>

6. Change All Image Extensions from PNG to JPG

If the extensions of all your images are changed (for any reason) then changing extension in source code will be a nightmare. To change the extension of all your images from png to jpg, use following code.

$(document).ready(function(){

$('img[src$=".png"]').each(function(index,element) {

element.src = element.src.replace('.png,'.jpg);

});

});
</pre>

7. Preloading Images

The jQuery code below will preload the images which you may need to use later on.

$.preloadImages = function() {

for (var i = 0; i < arguments.length; i++) {

$("<img />").attr("src", arguments[i]);

}

$(document).ready(function() {

$.preloadImages("hoverimage1.jpg", "hoverimage2.jpg");

});
</pre>

8. Resizing Images Proportionally

The jQuery code below will resize the image based on resolution. Here the max_size variable is set to the maximum height or width.

$("img").each(function(i) {

if ($(this).height() > $(this).width()) {

var h = max_size;

var w = Math.ceil($(this).width() / $(this).height() * max_size);

} else {

var w = max_size;

var h = Math.ceil($(this).height() / $(this).width() * max_size);

}

$(this).css({ height: h, width: w });

});

</pre>

Interesting unknown facts about jQuery

Post Release

The Right Web Developer Portfolio jQuery Plugins

Arctext.js

CollagePlus

Swipebox

Adipoli 2.0

Spectragram.js

10 Best jQuery Plugins to add Dynamic Effects

How to parse URL Using jQuery

10 jQuery Plugins to make your website responsive

12 Responsive jQuery Lightbox Plugins

Show Password as you type using jQuery.rar

HTML Code

jQuery Code

8 jQuery Plugins to Integrate Instagram Photos

10 jQuery Plugins with Google Material Design

10 jQuery Plugins to Create Flip Effects

10 jQuery Plugins for Social Sharing Buttons

10 jQuery Plugins to Enhance Tables

10 Newest Interesting jQuery Plugins

15 jQuery Sticky HTML Element Plugins

10 jQuery Vimeo Plugins

13 jQuery Plugins to Create One Page Scroll

10 jQuery Plugins for EU Cookie Law Notification Popup

12 jQuery Image Cropping Plugins

8 Handy jQuery Code Snippets For Handling Images