Useful JavaScript Libraries and jQuery Plugins

Advertisement

If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging.

A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won’t load properly, or won’t be supported — e.g. users of mobile devices might run into latency issues1 or performance issues2 with some JavaScript-libraries. Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, “light” alternatives for a particular problem. We’ll present some of them today.

In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. You might know some of these libraries, but you probably don’t know all of them. In either case, we hope that this overview will help you find or rediscover some tools that you could use in your next projects.

Due to the length of this post, we’ve split it into two parts for your convenience:

Quick Overview:

Below you’ll find a brief overview and links to the libraries and tools featured in this post. They are supposed to help you find just the right tool quickly without browsing the whole page.

Web Forms and Input Validation

Select2 jQuery Plugin56
A jQuery-plugin for replacement and enhancement of <select>-boxes. The plugin supports search, remote data sets, and infinite scrolling of results. Users can just start typing what they’re looking for. Non-matching entries are removed from the view, and options can be selected using “Enter” or a mouse click. The plug-in works with standard select input fields as well as with multiple selects and optgroup. It also has support for selected, disabled and default text (HTML5’s placeholder attribute). The plug-in is based on Chosen57, an alternative solution which is currently available in jQuery, MooTools and Prototype flavors and as a Drupal 7 module.

 

JavaScript Library58

jQueryCoreUISelect59
Another cross-browser solution to enhance the <select> element with jQuery and CSS. Requires jQuery 1.6 or higher. It provides full customization, support of optiongroup, automatic calculations, keyboard support, callback functions and is compatible with mobile devices.

jQueryCoreUISelect60

Sisyphus.js61
This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.

Sisyphus.js62

jQuery Credit Card Validator63
This library attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and if the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. You might want to consider credit cards JavaScript validator64 and the Smart Validate Credit Card Validation plugin65.

JavaScript Library66

TextExt67
This library allows you to transform HTML text into input fields, without resorting to code inflation. The plugin inserts aesthetic as well as practical input possibilities, e.g. Tags, Ajax, Focus and others.

TextExt68

Avgrund: Better Modal Boxes69
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab70 uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.

Avgrund: Better Modal Boxes71

VisualSearch.js72
This library enhances ordinary search boxes with the ability to autocomplete faceted search queries. You can specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.

Ideal Forms Framework73
A very comprehensive jQuery plugin for building and validating responsive HTML5 forms. It provides keyboard support, customizable input types, “on the spot” validation, localization and HTML5 placeholder polyfill. Supported in IE8+, Chrome, Firefox, Opera, iOS5+, Android 4.0+.

Ideal Forms Framework74

Mailcheck75
With this JavaScript spell-checker you can suggests another domain when the user misspells it in an email address. Mailcheck helps effectively reducing sign up typos. While it already includes some  domains, you can easily supply your own.

Mailcheck76

Validate.js77
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).

JavaScript Library78

jQuery File Upload79
File Upload widget with multiple file selection, drag&drop-support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

JavaScript Library80

Grumble.js81
This jQuery plugin provides tool tips without being limited to cardinal directions. A grumble can be rotated around a given element at any angle, all 360 degrees and at any distance — with CSS. Works in Internet Explorer 6+ and modern browsers. Also, check Tipped82, a larger library of various designs and implementations of tooltips with an extensive API.

Grumble.js83

Dialogs for Twitter Bootstrap84
A small JavaScript library which allows you to create dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. You might want to check out the Date Range Picket for Bootstrap85 as well as a growing library of HTML Snippets for Twitter Bootstrap86.

JavaScript Library87

ddSlick88
Prashant Chaudhary has realeased a free lightweight jQuery plugin that lets you create a custom drop-down that can include images, a short description, along with your usual text and value. It also supports callback functions on selection. You could use CSS3 Drop-Downs89 as well.

ddSlick90

noty91
This jQuery plugin makes it easy to create alert, success, error, warning, information and confirmation messages. The notification can be positioned anywhere on the page and you can customize the text, animation, speed and buttons easily.

noty92

jQuery.complexify.js93
Complexify helps you to accurately gauge the quality of a user’s password to give them visual feedback, and to enforce a minimum level of security.

JavaScript Library94

Numberfy95
With Numberfy you can integrate native support for line numbers in your website’s text areas. On every key press in the text area, the text area’s current value is split into lines. This script will not work in IE due to a bug in the text-wrap properties.

FormAccordion96
A jQuery plugin for easily hiding and revealing related form fields conditionally.

jQuery.superLabels97
You can use the library to give your forms a fade-out label. This implementation makes the label slide across the field when gaining focus and fade out when a value is entered. A fallback is provided as well.

cryptico98
An encryption system utilizing RSA and AES for JavaScript.

Web Typography Libraries and Plugins

Baseline.js99
A jQuery plugin for restoring baselines thrown off by odd image sizes. To use it, you just call the plugin passing the height of your baseline as a variable. You can also define multiple baselines for different responsive breakpoints.

Baseline.js100

FTColumnflow101
Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.

FTcolumnflow102

Responsive Measure jQuery Plugin103
A simple script that allows you to pass in a selector (ideally the container where your primary content will go), which generates the ideal font size needed to produce the ideal measure for your text. The script also  generates a resolution-independent font-scale based on the ideal font-size. Created by Josh Brewer.

Baseline.js104

The Widow Tamer105
The Widow Tamer is a small JavaScript library that automatically “fixes” typographic widows. It’s designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.

JavaScript Library106

Fluid Line-Height107
With his article, Tim Brown inspired developers to release tools that adjust line-height for optimum readability on responsive websites. The so-called molten-leading binds the height of the line to an element’s minimum and maximum width. jQuery-minLineHeight is a jQuery plugin that works similarly with minimum and maximum width association.

Nice Web Type108

FitText.js109
This jQuery plugin helps you create scalable headlines that fill the width of a parent element in your fluid or responsive layouts. You might want to check out Lettering.js110 as well to get a complete down-to-the-letter control of letters in your projects.

FitText.js111

Kerning.js11228
This library lets you kern, style, transform, and scale your Web type with CSS rules, automatically. You can adjust pairings, introduce font conditionals and augment properties.

Kerning.js113

SlabText.js114
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Nice Web Type115

Little Time-Savers

money.js: Open-Source Exchange Rates and Currency Conversion116
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Joss also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

JavaScript Library117

Accounting.js: Easier Number and Currency Formatting118
This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional.

JavaScript Library119

Moment.js: Format Dates And Times120
Moment.js is a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date and support for leap years.

JavaScript Library121

Smart Time Ago122
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.

Smart Time Ago123

sortByTimeAgo.js124
A little JavaScript library that takes an array of objects with TimeAgo properties and sorts them from newest to oldest.

Piecon125
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.

Piecon126

Notificon: Favicon Notifications and Alerts127
Matt Williams’ Notificon is a JavaScript library for creating favicon alerts and notifications. Instead of having to create a number of favicons and serving them to the client, you can specify a label and a favicon (the default being the current favicon), and it will generate a favicon notification for you. The script currently works with Chrome 6+, Firefox 2+ and Opera, but it’s a nice little add-on for browsers that support it.

jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point128
A problem: some of the images in the layout are very tall, so by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the description of the images or navigation items. The solution: make the content sticky as you are scrolling. This library solves this problem.

jQuery Stick 'em129

Countdown.js130
Human descriptions for a span of time are often fuzzier than a computer naturally computes. For example, how long does “in 1 month” mean? We casually talk about four weeks, but in fact there is only one month in a year which is four weeks long. Countdown.js tackles this problem by producing an accurate and intuitive description of timespans which are consistent as time goes on.

geolib131
A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.

Geolib.js132

Cookies133
Cookies.js is a small client-side JavaScript library that makes managing cookies easy. It caches cookie values, making sequential reads faster, supports AMD / CommonJS loaders and is supported in Chrome, Firefox 3+, Safari 4+, Opera 10+ and Internet Explorer 6+.

firstImpression.js134
firstImpression.js is a micro-library (1 Kb minified) that answers the simple question, “Has this user visited this site before?” The detection doesn’t require much logic, so the majority of the code is just a plain JavaScript port of the popular jquery.cookie135 plugin.

Chirp.js: Tweets on Your Website136
A lightweight templating JavaScript library that enables you to display tweets on your website. Client-side caching is available; and you can set if you’d like to show retweets and replies, too.

Chirp.js: Tweets on your website137

simpleWeather jQuery Plugin138
A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

zip.js13934
A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill140.

string.js141
A library that provides extra String methods to normalize text strings and manipulate them.

Images, Maps, Graphs and Visualization Libraries

jVectorMap142
jVectorMap is a jQuery plugin that renders SVG and VML vector maps in browsers ranging from the ancient Internet Explorer 6 to modern browsers. jVectorMap uses JavaScript, CSS, HTML, SVG or VML, and no Flash or any other proprietary browser plugin is required.

JavaScript Library143

Subway Map Visualization jQuery Plugin144
If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where do you start? Well, creating a Subway Map-alike visualization is an option worth considering.

JavaScript Library145

GMaps.js146
This library allows you to easily use Google Maps in your projects. Extensive documentation or large amount of code aren’t required anymore. You might want to check out Gmap3 jQuery plugin147 as well.

GMaps.js148

Leaflet: Open-Source Interactive Maps With JavaScript149
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

JavaScript Library150

SVGeezy: a JavaScript plugin for SVG fallbacks151
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.

SVGeezy - a JS plugin for SVG fallbacks152

Retina.js153
A script that checks each image on your website, when it’s loaded by a user, and replaces low-resolution image with their high-resolution equivalent, if available. It’s assumed that you use Apple’s high resolution modifier (@2x) to designate high resolution versions of images.

JustGage154
A JavaScript library for generating and animating gauges. Based on Raphaël library for vector drawing, it’s resolution-independent and works in all modern browsers.

JustGage155

arbor.js156
A graph visualization library for building trees with connected nodes of data. Arbor.js is essentially a layout algorithm with abstractions for graph organization and screen refresh handling.

Arbor.js157

Timeline: Generate Timelines To Visualize Data158
This library is supposed to pull in media from different sources. It has built-in support for pulling in data from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud—and more will be included in the near future. You can easily fill in data from a Google spreadsheet, or use a more detailed method such as JSON to create your time-line. You can also host it on your website by using the Timeline jQuery plugin. The library is available on GitHub159, or as WordPress plugin160.

JavaScript Library161

Unicon162
Unicon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.

Foresight.js163
This device recognition library, gives websites the ability to gauge the users device capabilities before the image is requested from the server. Judging display resolution and network speed, it customizes the img src attribute to optimize the websites image resolution to the individual users hardware.

A Magnifying Glass With CSS3 And jQuery164
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.

JavaScript Library165

Rickshaw166
This free and open source JavaScript toolkit provides the elements which you need to create interactive graphs, such as renderers, legends, hovers and range selectors. Rickshaw is based on D3, graphs are drawn with standard SVG and styled with CSS.

Rickshaw167

Flot: Plotting for jQuery168
A JavaScript plotting library for jQuery, supports Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+. You can use different types of graphs, use multiple axes, annotate a chart, update graphs with AJAX, provide support for zooming and interaction with the data points, use stacked charts, theresholding the data, apply pie charts and plot prerendered images.

Flot.js169

Chronoline.js170
Chronoline.js is a library that allows you to create a chronology time-line out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more.

JavaScript Library171

Cubism172
This D3 plugin helps you to visualize time series and construct better real-time dashboards, pulling data from Graphite, Cube and other sources. Cubism scales and reduces server load by pulling only the most recent values. Cubism can scale easily to hundreds of metrics updating every ten seconds. Cubism’s horizon charts allow you to see many more metrics at-a-glance space than standard area charts.

Cubism173

Envision.js174
An alternative library for creating fast, dynamic and interactive HTML5 visualizations.

JavaScript Library175

Data Visualization JavaScript Libraries176
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.

Data Visualization JavaScript Libraries177

Last Click

jQuery Fundamentals178
This HTML book is designed to get you comfortable working through common problems you’ll be called upon to solve using jQuery. You can read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept. Written by Rebecca Murphey and recently updated by her and the rest of the gang at Bocoup.

JavaScript Library179

JavaScript Patterns Collection180
A JavaScript pattern and anti-pattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns.

JavaScript Library181

JavaScript Garden182
A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language.

JavaScript Library183

Useful JavaScript and jQuery Libraries: Two Parts

Due to the length of this resource, it was split into two parts:

Footnotes

  1. 1 http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
  2. 2 http://www.slideshare.net/stoyan/javascript-performance-patterns
  3. 3 http://www.smashingmagazine.com/useful-javascript-libraries-jquery-plugins-part-2/
  4. 4 http://elclanrs.github.com/jq-idealforms/
  5. 5 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
  6. 6 https://github.com/blueimp/jQuery-File-Upload
  7. 7 https://github.com/23/resumable.js
  8. 8 http://ivaynberg.github.com/select2/
  9. 9 http://labs.voronianski.com/jquery.avgrund.js/
  10. 10 https://github.com/OliverJAsh/FormAccordion
  11. 11 https://github.com/remybach/jQuery.superLabels
  12. 12 http://designwithpc.com/Plugins/ddSlick
  13. 13 http://projects.nickstakenburg.com/tipped
  14. 14 http://textextjs.com/
  15. 15 http://rickharrison.github.com/validate.js/
  16. 16 http://paweldecowski.github.com/jQuery-CreditCardValidator/
  17. 17 http://www.egrappler.com/jquery-credit-card-validation-plugin-smart-validate/
  18. 18 https://github.com/Kicksend/mailcheck
  19. 19 https://github.com/danpalmer/jquery.complexify.js
  20. 20 http://daneden.me/baseline/
  21. 21 https://github.com/ftlabs/ftcolumnflow
  22. 22 http://jbrewer.github.com/Responsive-Measure/
  23. 23 http://artequalswork.com/posts/on-widows.php
  24. 24 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
  25. 25 http://fittextjs.com/
  26. 26 http://www.frequency-decoder.com/demo/slabText/
  27. 27 http://letteringjs.com/
  28. 28 http://kerningjs.com/
  29. 29 http://josscrowcroft.github.com/money.js/
  30. 30 http://momentjs.com/
  31. 31 http://pragmaticly.github.com/smart-time-ago/
  32. 32 http://josscrowcroft.github.com/accounting.js/
  33. 33 https://github.com/ScottHamper/Cookies
  34. 34 http://gildas-lormeau.github.com/zip.js/
  35. 35 http://stringjs.com/
  36. 36 http://countdownjs.org/
  37. 37 http://viget.com/inspire/jquery-stick-em
  38. 38 http://hpneo.github.com/gmaps/
  39. 39 http://leaflet.cloudmade.com/
  40. 40 http://widgets.better2web.com/loader/
  41. 41 http://lipka.github.com/piecon/
  42. 42 https://github.com/makeable/Notificon
  43. 43 http://jvectormap.com/
  44. 44 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
  45. 45 http://hpneo.github.com/gmaps/
  46. 46 http://leaflet.cloudmade.com/
  47. 47 http://twostepmedia.co.uk/svgeezy/
  48. 48 http://www.justgage.com/
  49. 49 http://arborjs.org/
  50. 50 http://timeline.verite.co/
  51. 51 http://retinajs.com/
  52. 52 http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  53. 53 http://code.shutterstock.com/rickshaw/
  54. 54 http://www.flotcharts.org/
  55. 55 http://square.github.com/cubism/
  56. 56 http://ivaynberg.github.com/select2/
  57. 57 https://github.com/harvesthq/chosen/
  58. 58 http://ivaynberg.github.com/select2/
  59. 59 http://shaggysmile.github.com/jQueryCoreUISelect/
  60. 60 http://shaggysmile.github.com/jQueryCoreUISelect/
  61. 61 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
  62. 62 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
  63. 63 http://paweldecowski.github.com/jQuery-CreditCardValidator/
  64. 64 http://davidwalsh.name/validate-credit-cards
  65. 65 http://www.egrappler.com/jquery-credit-card-validation-plugin-smart-validate/
  66. 66 http://paweldecowski.github.com/jQuery-CreditCardValidator/
  67. 67 http://textextjs.com/
  68. 68 http://textextjs.com/
  69. 69 http://labs.voronianski.com/jquery.avgrund.js/
  70. 70 https://github.com/hakimel/avgrund/
  71. 71 http://labs.voronianski.com/jquery.avgrund.js/
  72. 72 http://documentcloud.github.com/visualsearch/
  73. 73 http://elclanrs.github.com/jq-idealforms/
  74. 74 http://elclanrs.github.com/jq-idealforms/
  75. 75 https://github.com/Kicksend/mailcheck
  76. 76 https://github.com/Kicksend/mailcheck
  77. 77 http://rickharrison.github.com/validate.js/
  78. 78 http://rickharrison.github.com/validate.js/
  79. 79 https://github.com/blueimp/jQuery-File-Upload
  80. 80 https://github.com/blueimp/jQuery-File-Upload
  81. 81 http://jamescryer.github.com/grumble.js/
  82. 82 http://projects.nickstakenburg.com/tipped
  83. 83 http://jamescryer.github.com/grumble.js/
  84. 84 http://bootboxjs.com/
  85. 85 http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/
  86. 86 http://bootsnipp.com/
  87. 87 http://bootboxjs.com/
  88. 88 http://designwithpc.com/Plugins/ddSlick
  89. 89 http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/
  90. 90 http://designwithpc.com/Plugins/ddSlick
  91. 91 http://needim.github.com/noty/
  92. 92 http://needim.github.com/noty/
  93. 93 https://github.com/danpalmer/jquery.complexify.js
  94. 94 https://github.com/danpalmer/jquery.complexify.js
  95. 95 http://www.mitya.co.uk/blog/2012/Jan/Numberfy-add-line-numbers-to-your-textareas-198
  96. 96 https://github.com/OliverJAsh/FormAccordion
  97. 97 https://github.com/remybach/jQuery.superLabels
  98. 98 https://github.com/wwwtyro/cryptico
  99. 99 http://daneden.me/baseline/
  100. 100 http://daneden.me/baseline/
  101. 101 https://github.com/ftlabs/ftcolumnflow
  102. 102 https://github.com/ftlabs/ftcolumnflow
  103. 103 http://jbrewer.github.com/Responsive-Measure/
  104. 104 http://jbrewer.github.com/Responsive-Measure/
  105. 105 http://artequalswork.com/posts/on-widows.php
  106. 106 http://artequalswork.com/posts/on-widows.php
  107. 107 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
  108. 108 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
  109. 109 http://fittextjs.com/
  110. 110 http://fittextjs.com/
  111. 111 http://fittextjs.com/
  112. 112 http://kerningjs.com/
  113. 113 http://kerningjs.com/
  114. 114 http://www.frequency-decoder.com/demo/slabText/
  115. 115 http://www.frequency-decoder.com/demo/slabText/
  116. 116 http://josscrowcroft.github.com/money.js/
  117. 117 http://josscrowcroft.github.com/money.js/
  118. 118 http://josscrowcroft.github.com/accounting.js/
  119. 119 http://josscrowcroft.github.com/accounting.js/
  120. 120 http://momentjs.com/
  121. 121 http://momentjs.com/
  122. 122 http://pragmaticly.github.com/smart-time-ago/
  123. 123 http://pragmaticly.github.com/smart-time-ago/
  124. 124 https://github.com/cjstewart88/sortByTimeAgo
  125. 125 http://lipka.github.com/piecon/
  126. 126 http://lipka.github.com/piecon/
  127. 127 https://github.com/makeable/Notificon
  128. 128 http://viget.com/inspire/jquery-stick-em
  129. 129 http://viget.com/inspire/jquery-stick-em
  130. 130 http://countdownjs.org/
  131. 131 https://github.com/manuelbieh/geolib
  132. 132 https://github.com/manuelbieh/geolib
  133. 133 https://github.com/ScottHamper/Cookies
  134. 134 http://www.ravelrumba.com/blog/firstimpression-js-library-detecting-new-visitors/
  135. 135 https://github.com/carhartl/jquery-cookie
  136. 136 http://lab.rog.ie/chirp/
  137. 137 http://lab.rog.ie/chirp/
  138. 138 http://monkeecreate.github.com/jquery.simpleWeather/
  139. 139 http://gildas-lormeau.github.com/zip.js/
  140. 140 https://bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js
  141. 141 http://stringjs.com/
  142. 142 http://jvectormap.com/
  143. 143 http://jvectormap.com/
  144. 144 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
  145. 145 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
  146. 146 http://hpneo.github.com/gmaps/
  147. 147 http://gmap3.net/
  148. 148 http://hpneo.github.com/gmaps/
  149. 149 http://leaflet.cloudmade.com/
  150. 150 http://leaflet.cloudmade.com/
  151. 151 http://twostepmedia.co.uk/svgeezy/
  152. 152 http://twostepmedia.co.uk/svgeezy/
  153. 153 http://retinajs.com/
  154. 154 http://www.justgage.com/
  155. 155 http://www.justgage.com/
  156. 156 http://arborjs.org/
  157. 157 http://arborjs.org/
  158. 158 http://timeline.verite.co/
  159. 159 https://github.com/VeriteCo/Timeline
  160. 160 http://wordpress.org/extend/plugins/timeline-verite-shortcode/
  161. 161 http://timeline.verite.co/
  162. 162 https://github.com/filamentgroup/unicon
  163. 163 https://github.com/adamdbradley/foresight.js
  164. 164 http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  165. 165 http://www.smashingmagazine.com/wp-content/uploads/2012/08/nl-2.jpg
  166. 166 http://code.shutterstock.com/rickshaw/
  167. 167 http://code.shutterstock.com/rickshaw/
  168. 168 http://www.flotcharts.org/
  169. 169 http://www.flotcharts.org/
  170. 170 http://stoicloofah.github.com/chronoline.js/
  171. 171 http://stoicloofah.github.com/chronoline.js/
  172. 172 http://square.github.com/cubism/
  173. 173 http://square.github.com/cubism/
  174. 174 http://www.humblesoftware.com/envision
  175. 175 http://www.humblesoftware.com/envision
  176. 176 http://selection.datavisualization.ch
  177. 177 http://selection.datavisualization.ch
  178. 178 http://jqfundamentals.com/
  179. 179 http://jqfundamentals.com/
  180. 180 http://shichuan.github.com/javascript-patterns/
  181. 181 http://shichuan.github.com/javascript-patterns/
  182. 182 http://bonsaiden.github.com/JavaScript-Garden/
  183. 183 http://bonsaiden.github.com/JavaScript-Garden/
  184. 184 http://www.smashingmagazine.com/useful-javascript-libraries-jquery-plugins-part-2/

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    awesome!

    0
  2. 3

    WOW! Sweet! amazing collection! Thank you so so much

    0
  3. 4

    John Madhavan-Reese

    September 26, 2012 9:56 am

    jQuery Fundamentals wasn’t Addy Osmani, it was Rebecca Murphey. And it’s been recently updated by her and the rest of the gang at Bocoup.

    0
  4. 6

    Tooting my own horn, but if you are just looking for a way to format a date using placeholders (dd/mmm/yy, etc.) then you might use my (wonderfully compact!) function rather than a library:

    var FormatDate = function (sFormat, dDate) {
        // Returns: A string version of the date-value dDate,
        // or of today's date if dDate is omitted.
        // Usage: FormatDate("d mmm yy hh:nn:ss") or
        // FormatDate("dddd dd mmmm", date_var)
        // Defaults to YYYY/MM/DD.
        var MonthNames = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
        var DayNames = [ "Sunday", "Monday", "Tueday", "Wednesday", "Thursday",
            "Friday", "Saturday" ];
        var dDate = dDate || new Date(),
            D = dDate.getDate(), DDDD = DayNames[dDate.getDay()],
            DDD = DDDD.substr(0,3),
            M = dDate.getMonth()+1, MMMM = MonthNames[dDate.getMonth()],
            MMM = MMMM.substr(0,3),
            YYYY = dDate.getFullYear(), YY = ('' + YYYY).substr(2, 2),
            H = dDate.getHours(), N = dDate.getMinutes(), S = dDate.getSeconds(),
            // pad with leading zeros, if required
            DD = ( D < 10 ? "0" : "" ) + D,
            MM = ( M < 10 ? "0" : "" ) + M, HH = ( H < 10 ? "0" : "" ) + H,
            NN = ( N < 10 ? "0" : "" ) + N, SS = ( S < 10 ? "0" : "" ) + S;
    
        sFormat = ( sFormat ) ? sFormat.toUpperCase() : 'YYYY/MM/DD';
        var sParsed = sFormat.replace(/D{1,4}|M{1,4}|Y{2,4}|H{1,2}|N{1,2}|S{1,2}/g,
            function (m) {
                try {
                    return eval(m);
                } catch (e) {
                    return '';
                }
            });
        return sParsed;
    };
    

    I didn't create AM/PM placeholders though.

    0
  5. 7

    wow.nice programming…
    thanks to share…..

    0
  6. 8

    very helpful collection !

    0
  7. 9

    You should really add Chosen to the Web Forms section, it handles select boxes beautifully. http://harvesthq.github.com/chosen/

    0
  8. 10

    Very good collection. Very helpful and will save a lot of time for many developers. Thank you

    0
  9. 11

    wow, great list. What kind of libraries do you recommend for visual bugs or customer testing? We currently use usersnap.com, with that tool customers can mark visual defects and we get direct feedback (as screenshot).

    0
  10. 12

    OMG, thanks a lot for sharing all these… It’s totally great for references

    0
  11. 13

    Definetly saved on my *useful resources* list!

    0
  12. 14

    don’t forget about Chosen by the awesome folks at Harvest. It’s similar to TextExt and may predate it.

    http://www.getharvest.com/blog/2011/07/chosen-plug-in/

    0
  13. 15

    Wonderful collection, muchas gracias!

    0
  14. 16

    Old school, this reminds me of some roundups from early SM days.
    It is nice from time to time to have this.

    Cheers!

    0
  15. 17

    Best thread:-? But i want to question. ALl jquery plugin need java?

    0
  16. 18

    Wow! Thank you much for this article. It’s handy having a bookmark, or in my case @faavorite tag, that covers so much in one spot. Thanks again for the “library of Alexandria” for JS.

    0
  17. 19

    This is Awesommme! Super useful article. Thanks!

    0
  18. 20

    Some plugins are amazing. Thanks a lot!

    0
  19. 21

    Post like this is very fun and useful.

    One of my favourite modal box is Lean Modal. http://leanmodal.finelysliced.com.au/

    0
  20. 22

    This is incredibly useful – great roundup. Thank you!

    0
  21. 23

    Oh, that’s EPIC!

    0
  22. 24

    It only took a couple of lines to include am/pm so I thought it worth updating. Add AP or ap within the format string to obtain AM/PM or am/pm (that is, case-sensitive); or just add a third argument of true if you only want a twelve-hour clock.

    var FormatDate = function (sFormat, dDate, twelve) {
        // Returns: A string version of the date-value dDate,
        // or of today's date if dDate is omitted.
        // Usage: FormatDate("d mmm yy hh:nn:ss") or
        // FormatDate("dddd dd mmmm ap", date_var)
        // Defaults to YYYY/MM/DD.
        // twelve == true for a 12hr clock, or just AP or ap within
        // sFormat (for AM/PM or am/pm).
        var MonthNames = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
        var DayNames = [ "Sunday", "Monday", "Tueday", "Wednesday", "Thursday",
            "Friday", "Saturday" ];
        var dDate = dDate || new Date(),
            D = dDate.getDate(), DDDD = DayNames[dDate.getDay()],
            DDD = DDDD.substr(0,3),
            M = dDate.getMonth()+1, MMMM = MonthNames[dDate.getMonth()],
            MMM = MMMM.substr(0,3),
            YYYY = dDate.getFullYear(), YY = ('' + YYYY).substr(2, 2),
            H = dDate.getHours(), N = dDate.getMinutes(), S = dDate.getSeconds(),
            ap = (H > 11) ? "pm" : "am",
            // pad with leading zeros, if required
            DD = ( D < 10 ? "0" : "" ) + D,
            MM = ( M < 10 ? "0" : "" ) + M,
            NN = ( N < 10 ? "0" : "" ) + N,
            SS = ( S < 10 ? "0" : "" ) + S;
        var AP = (sFormat && (sFormat.toUpperCase().indexOf('AP')+1)) ?
            ((sFormat.indexOf('ap')+1) ? ap : ap.toUpperCase()) : '';
        if (twelve || AP) {
            H = (H < 12) ? (H || 12) : ((H - 12) || 12);
        }
        var HH = ( H < 10 ? "0" : "" ) + H;
        sFormat = ( sFormat ) ? sFormat.toUpperCase() : 'YYYY/MM/DD';
        var sParsed = sFormat.replace(/D{1,4}|M{1,4}|Y{2,4}|H{1,2}|N{1,2}|S{1,2}|AP/g,
            function (m) {
                try {
                    return eval(m);
                } catch (e) {
                    return '';
                }
            });
        return sParsed;
    };
    

    I apologise if this is not a suitable place to offer this code but I considered it relevant. Andy. [38 lines, but 8 of them are comments :) ]

    0
  23. 25

    Awesome collection!

    0
  24. 26

    It’s awesome components library !

    0
  25. 27

    Awesome. Great. Outstanding.

    Thanks!

    0
  26. 28

    Fantastic collection of actually useful libraries.

    0
  27. 29

    Great list of useful libraries. Here is one useful jQuery plugin that you missed:

    SelectBoxIt – A super robust jQuery select box plugin that works well on mobile, tablet, and desktop.

    http://www.selectboxit.com

    0
  28. 30

    As is traditional with comment threads on this type of post, I’d like to draw your attention to a little script I wrote last week for generating HTML from JavaScript objects, as a lightweight alternative to templating: http://github.com/markrendle/moist.js

    0
  29. 31

    Heya, the notificon example script doesn’t actually work for me on Google Chrome 22 (other favicon changers work fine though). Did work on firefox. (Tested Windows & Mac)

    0
  30. 32

    Amazing collection, thanks for that!

    0
  31. 33

    Thats an awesome post, I have bookmarked it. I know I would have to come again and again on this page while doing a project.

    0
  32. 34

    Why you didn’t mention that the less you use the plugins – the better?Sites must be informative and then beautiful for little exception. Or why we have over 100 Mb per site in open tab in browser?

    0
  33. 35

    Very useful!!!

    0
  34. 36

    Very useful collection! It’s good to see such posts from time to time on SM.
    Here is another neat JS message library for alerts and notifications (MIT licensed):
    http://dhtmlx.github.com/message/

    0
  35. 37

    Even though you mention it in some places in passing you should have included D3.js ( http://d3js.org ) as a data visualization library. Good list though :)

    0
  36. 38

    I wont say manything…….i just want to say “awsum”………..

    0
  37. 39

    Wao, what a useful collection of plugins for developer. Thanks so much

    0
  38. 40

    I’ve created a library that links PHP, jQuery and AJAX tightly, it’s called Phery, and you may manipulate the browser DOM from PHP, while still being able to work with Javascript events and raw JSON and HTML data. Grab it here http://phery-php-ajax.net

    0
  39. 41

    hohoho…reading…reading n reading :)
    thanks for lists ^_^

    0
  40. 42

    Man, this is awesome info. I´m learning so much with your articles. I love the web 0_o

    0
  41. 43

    I would use one plugin from this post. Thanks for sharing.

    0
  42. 44

    Very nice!

    0
  43. 45

    Hey cool plugins in this list!
    I too created a plugin to zoom on image hover.
    http://www.codehandling.com/2012/12/hover-zoom-20-facebook-style-zoom-on.html

    Is it smashing enough to be in this list? ;)

    0
  44. 46

    Thanks for this great list!
    I think FeedEk jQuery RSS/ATOM Feed Plugin deserve to be in this list too.
    http://jquery-plugins.net/FeedEk/FeedEk.html

    0
  45. 47

    Take a look at Zino UI – a jQuery UI components library & HTML5 framework.

    See http://zinoui.com

    0
  46. 48

    Nice roundup – keep ‘em coming Smashing!

    0
  47. 49

    Thanks for great collection. I’m looking for a javascript application which focuses on new features (I mean div’s) on webpage.
    serhatdundar.com

    0
  48. 50

    Great!! Nice collection. Keep Updating.

    0
  49. 51

    Huge collection of jQuery plugins can be found here
    http://jquery-plugins.net

    0
  50. 52

    Great article!
    You may also want to add http://www.prepbootstrap.com/, which includes free templates and complete themes with js widgets.

    Cheers!

    0
  51. 53

    Also check out Highcharts, Highstock and Highmaps for data visualization/charting needs. Lots of advanced features while still remaining lightweight. Optimized for mobile users as well.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top