Ten Useful JavaScript Libraries and jQuery Plugins for Web Developers

Syed Fazle Rahman

Whether you are a novice front end designer or an experienced web developer, every one of us has faced a situation where we write hundred lines of code and nothing seems to run as expected. If you have experience working in JavaScript and jQuery, then you might understand how troublesome it is to find a simple bug which was left behind unintentionally.

Thus, we turn to pre-coded libraries and plugins. These utilities help us solve some specific problem by simply including them in our programs. They were made to solve some frequently occurring problems for developers. It is always good to have them bookmarked or downloaded in a local folder for future use. This article presents ten of the best JavaScript libraries and jQuery plugins developed to solve some of the most frequently occurring tasks in a website’s interface.

#1 jQuery File Upload

As the name suggest, jQuery File Upload is a jQuery plugin used as a widget in web pages for uploading files. Some of the best features of this plugin are simultaneous uploading of multiple files, progress bar display, drag and drop from the desktop, cancel and resume of uploads, image previews while uploading, etc. This plugin also supports chunked upload, which means larger files can be uploaded in smaller parts. It is compatible with any server side platform like PHP, Ruby, Python, Node.js, etc.

Source code

#2 Ideal Forms

Ideal Forms is a jQuery plugin for building HTML5 compatible forms. It supports form validation, customizable input types (select, file, radio, and checkbox), keyboard support, localization, custom datepicker using jQuery UI (fallback). This plugin works on Google Chrome, Opera, Firefox, IE8+, iOS5+, and Android 4.0+ browsers.

Source Code

#3 Form Accordion

Form Accordion is a jQuery plugin used for hiding and displaying related fields conditionally. This plugin can save you lots of time when building a form for a wide range of audiences. You can add conditions to specify which field to appear next if a particular value is selected in the current field.

Source Code

#4 TextExt Plugin

TextExt Plugin is also a jQuery plugin that allows you to easily fill HTML text fields with suggestions. As you start typing in the text input field this plugin will show you a predefined set of suggestions matching what you have typed. TextExt is a great tool for making searches faster in web pages.

Source code

#5 Sisyphus.js

Sisyphus.js is a script which helps visitors store form data locally in the browser. This script comes to the rescue when you are filling out a large form and all of a sudden you hit the close button of the browser accidentally. This script will fill the forms out for you automatically the next time you reload the page. This script is supported in Google Chrome 4+, Firefox 3.5+, Opera 10.5+, Safari 4+, and IE8+. For older version of IE (6 and 7) you have to load jStorage before loading Sisyphus.js.

Source Code

#6 jQuery Credit Card Validator

jQuery Credit Card Validator validates an input field every time the user inserts a value. It recognizes the card and highlights the card type when a correct number is provided. Some of the supported card types are American Express, Laser, Diners Club, JCB, Discover Card, Maestro, MasterCard, Visa, and Visa Electron.

Source code

#7 FTColumnflow

FTColumnflow is a JavaScript library that helps web designers fix inadequacies of CSS column layout. It is named so because it was developed by Financial Times as part of their website layout project. This library helps in managing complex newspaper/magazine style layout and has many important features like fixed position elements, configurable column widths and margins, grouping columns into pages, vertical and horizontal alignment, etc. FTColumnflow is compatible with Chrome 8+, Safari 5+, Firefox 10+, iOS 5+, Android ICS+, Playbook OS 2.0.1+, and IE 10+ browsers.

Source code

#8 FitText.js

FitText is a jQuery plugin to achieve responsive font types in your website. It resizes the headings in your website as per the ratio. It ignores the font size and uses minFontSize and maxFontSize to make the font flexible. If you are building a responsive or fluid design then you can use this plugin to resize the headings.

Source code

#9 money.js

money.js is a JavaScript library which allows your visitors to get correct and updated exchange rates for free. It uses the Open Exchange rate API as the source for the current exchange rate, but it also has features so you can change the source. This library can be used in any framework, application, or language as you wish. It is not restricted to JavaScript based projects only. The best thing about this plugin is that it charges you no fee. There are also no rate limits!

Source code

#10 gmaps.js

Grab the power of Google Maps with this simple JavaScript library called gmaps.js. It helps you write simple lines of code for specifying what you need and the rest is done by the script. It locates areas, adds markers, shows routes, and has many other features. Some of the features include polylines, overlays, GeoJSON Polygons, Routes Advanced, Geofences, fusion tables layers, KML and GeoRSS layers, overlay map types, street view panoramas, geolocation, and geocoding. This library also has a jQuery plugin for it. So, if you are using jQuery then you can continue to use it without any collision problems.

Source code

Conclusion

We hope you will find these plugins and libraries useful for your work. We are looking forward to hearing from you. We will be back with another set of ten more useful JavaScript libraries and jQuery plugins very soon.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Chakotay

    Thank you for the article. I have added all these tools to my armor sets.

  • Tony Ross

    FANTASTIC! What a great bunch of plugins. Thanks for that.

    The only problem I can find is the gmaps.js library – doesn’t seem to work on ANY IE browser. I haven’t tried making something with it, but going from the link you’ve provided shows only a blue box instead of a map, no matter what the IE browser or browser-mode is. Must drop ‘em a line about this. Works fine in other browsers.

  • Ashraf Sabry

    Thank you for sharing this useful tools