Top jQuery plugins which every developer should use

jQuery is quite useful plugin and it being heavily used by the developers, because of lots of supported plugins, it makes develoeprs work easier. If you are a developer, and looking to solve some of your issue from already created jQuery plugins, here are the few of those which might ease your work and improve user experience of your web-application.

1. Scroll Me

Scroll Me is a jQuery plugin for adding simple scrolling effects to web pages.

As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It's easy to set up and not a single line of javascript is required.

Try it

To use it, just include jQuery + ScrollMe, add some bits to your markup and ScrollMe will do the rest.Easy to get started, the plugin does not require knowing a single line of coding.

ScrollMe works fine with just about any up to date browser. It also works in IE10 but if you want support for IE9 you will need to use a polyfill for requestAnimationFrame.

2. FitText

FitText jQuery plugin allows you to make font sizes flexible by automatically scaling it up and down. The plugin works perfectly to create scalable headlines by making font-sizes flexible.

3. MatchHeight.js

MatchHeight.js is allow to adjust the columns of your website it makes the height of all selected elements exactly equal. It’s a more robust equal heights plugin that correctly handles mixed padding, margin, border, box-sizing, rows, groups. It handles images and responsive layouts by automatically updating when needed.

It can help you to get rid of issues like How to make bootstrap columns of equal height ?

4. Timeline.js

Timeline.js is a plugin which can be used to create beatiful caraousle slider, it allows you to create position of image, i.e. it is a slider that progresses based on chronological points.It includes plenty of visual and functional customisation options.

Example jQuery code:

$('.timeline-2').Timeline({
  itemClass: 'box-item',
  dotsPosition: 'top',
  startItem: 'last'
});

5. jQuery Validation Plugin

There is already an article on Top jQuery Form Validation plugins but I would like to mention by personal favourite jQuery client side validaiton plugin i.e. jQuery Validation plugin it allows your validate form, easy to use and have wide range of validations, we can also customize and create our own functions to implement validations in form.

The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.

6. SVGMagic

If you are using SVG's in your web-application and worried about the browser support, then you don't need to worry about it with this plugin, SVGMagic is a jQuery plugin, which created fallback png images for browser, which doesn't have SVG support.

SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn't support SVG.

Using SVG images is a good idea because they will look sharp at any size, and this plugin helps you to do that without having to worry about browsers that don't support them.

7. TwentyTwenty

TwentyTwenty can be used in a situtation when you want to highlight the differences between two images, so Instead of placing two images side-by-side to show the differences between them, you can use this plugin which places one on top of the other.

User have to drag over the image to show/hide the images, enabling them to see what has changed in a before-and-after situation.

8.Tabslet

Tabslet is a great option for making tabs. It is lightweight, is easy-to-use, is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0. and supports custom events, rotation, animation and controls.

9. jInvertScroll

jInvertScroll is a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down. It's extremely easy to setup and requires nearly no configuration.

10. Typeahead.js

This is one of the most useful plugins I have mentioned here, as we all need a Search bar in our websites, and if you are looking to show results as a dropdown in search this can be very helpful plugin for you.

Typeahead.js  is a product of Twitter's development team, Type Ahead is an easy-to-implement tool that pulls from a local or external data source as your user types in to an input box, providing auto-complete suggestions as they go.

11. Image Cropper

Image croppper is a jQuery plugin allows you crop images on the website. It also provides some options and a preview. You can also set the height and width.

12. Bootstrap Tree View

Tree view is a tree-like representation of data. It is ideal for some web applications as it allows users to navigate to the information easily and quickly.

Bootstrap Tree view is a plugin with jQuery and Twitter Bootstrap. It lets you render a dynamic, filterable, collapsible, vertical hierarchical tree from your JSON data.

13. OneBook3d

OneBook3d is a jQuery plugin that you can easily create an eye-catching presentation of your books, magazines or portfolio. Flexible, adaptive and customizable design. Auto resizing images. Full screen mode. Ideal for photo-albums.

That's it for now, the plugins mentioned above enhance user experience by adding new features, I will keep discovering more jQuery plugins and would love to add a new plugin in it.

If I have missed any of your personal favourite plugins, please do mention about it in our comment's section.