10 jQuery Plugins to make your website responsive



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.


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

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

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

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


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

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


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

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

9.     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


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

How to parse URL Using jQuery

How to parse URL Using jQuery


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); });

10 Best jQuery Plugins to add Dynamic Effects




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
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

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

4.     Raindrops.js

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

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


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

8.     WebSnowjq.js

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

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

10.                        jQuery Rippel

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



The Right Web Developer Portfolio jQuery Plugins

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.

Interesting unknown facts about jQuery

Interesting unknown facts about jQuery
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.

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.