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.
#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.
#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.
#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.
#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.
#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.
#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.
#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.
#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!
#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.
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.
Syed Fazle RahmanWeb Designer with over 6 years of experience, including user experience and front end development. Currently, CEO and Co-Founder of Hashnode, a network of software developers. Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.
