Due to the length of this post, we’ve split it into two parts for your convenience:
- Part 1: Web Forms, Typography, Time-Savers and Images
- Part 2: Text, Tables, Lists and Useful Development Tools1843
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:
forms framework4 – auto-saving drafts5 – file upload6 (and resuming large downloads7) – <select> boxes8 – modal boxes9 – form accordion10 – dynamic labels11 – drop-down with images12 – tooltips13 – extended input14 – form validation15 – credit card validation16 (alternative17) – email check18 – password complexity19
- Web Typography:
repairing vertical baseline20 – align text to a grid21 – responsive measure22 – fixing widows23 – fluid line height24 – scalable headlines25 (or smart headlines26) – Lettering.js27 – Kerning.js11228
- Little Time-Savers:
exchange rates and currency29 – date/time formatting30 – relative timestamps31 – number and currency formatting32 – cookies.js33 – zip.js13934 – extra string methods35 – countdown.js36 – sticky content37 – Google Maps38 – interactive maps39 – progress bar40 – favicon notifications41 (or Notificon42)
- Images, Maps, Graphs:
world maps43 – subway map44 – Google maps45 – open source maps46 – SVG fallback47 – gauges48 – graphs49 – timeline50 – Retina display51 – magnifying glass52 – interactive graphs53 – plots54 – time visualization55
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
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.
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.
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.
jQuery Credit Card Validator63
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.
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.
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+.
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.
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.
Dialogs for Twitter Bootstrap84
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.
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.
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.
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.
Web Typography Libraries and Plugins
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.
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.
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.
The Widow Tamer105
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.
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.
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.
money.js: Open-Source Exchange Rates and Currency Conversion116
Accounting.js: Easier Number and Currency Formatting118
Moment.js: Format Dates And Times120
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.
Notificon: Favicon Notifications and Alerts127
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.
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.
Chirp.js: Tweets on Your Website136
Images, Maps, Graphs and Visualization Libraries
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.
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.
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.
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.
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.
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.
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.
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
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.
Flot: Plotting for jQuery168
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.
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.
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.
Due to the length of this resource, it was split into two parts:
- Part 1: Web Forms, Typography, Time-Savers and Images
- Part 2: Text, Tables, Lists and Useful Development Tools1843
- 1 http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
- 4 http://elclanrs.github.com/jq-idealforms/
- 5 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
- 6 https://github.com/blueimp/jQuery-File-Upload
- 7 https://github.com/23/resumable.js
- 8 http://ivaynberg.github.com/select2/
- 9 http://labs.voronianski.com/jquery.avgrund.js/
- 10 https://github.com/OliverJAsh/FormAccordion
- 11 https://github.com/remybach/jQuery.superLabels
- 12 http://designwithpc.com/Plugins/ddSlick
- 13 http://projects.nickstakenburg.com/tipped
- 14 http://textextjs.com/
- 15 http://rickharrison.github.com/validate.js/
- 16 http://paweldecowski.github.com/jQuery-CreditCardValidator/
- 17 http://www.egrappler.com/jquery-credit-card-validation-plugin-smart-validate/
- 18 https://github.com/Kicksend/mailcheck
- 19 https://github.com/danpalmer/jquery.complexify.js
- 20 http://daneden.me/baseline/
- 21 https://github.com/ftlabs/ftcolumnflow
- 22 http://jbrewer.github.com/Responsive-Measure/
- 23 http://artequalswork.com/posts/on-widows.php
- 24 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
- 25 http://fittextjs.com/
- 26 http://www.frequency-decoder.com/demo/slabText/
- 27 http://letteringjs.com/
- 28 http://kerningjs.com/
- 29 http://josscrowcroft.github.com/money.js/
- 30 http://momentjs.com/
- 31 http://pragmaticly.github.com/smart-time-ago/
- 32 http://josscrowcroft.github.com/accounting.js/
- 33 https://github.com/ScottHamper/Cookies
- 34 http://gildas-lormeau.github.com/zip.js/
- 35 http://stringjs.com/
- 36 http://countdownjs.org/
- 37 http://viget.com/inspire/jquery-stick-em
- 38 http://hpneo.github.com/gmaps/
- 39 http://leaflet.cloudmade.com/
- 40 http://widgets.better2web.com/loader/
- 41 http://lipka.github.com/piecon/
- 42 https://github.com/makeable/Notificon
- 43 http://jvectormap.com/
- 44 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
- 45 http://hpneo.github.com/gmaps/
- 46 http://leaflet.cloudmade.com/
- 47 http://twostepmedia.co.uk/svgeezy/
- 48 http://www.justgage.com/
- 49 http://arborjs.org/
- 50 http://timeline.verite.co/
- 51 http://retinajs.com/
- 52 http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
- 53 http://code.shutterstock.com/rickshaw/
- 54 http://www.flotcharts.org/
- 55 http://square.github.com/cubism/
- 56 http://ivaynberg.github.com/select2/
- 57 https://github.com/harvesthq/chosen/
- 58 http://ivaynberg.github.com/select2/
- 59 http://shaggysmile.github.com/jQueryCoreUISelect/
- 60 http://shaggysmile.github.com/jQueryCoreUISelect/
- 61 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
- 62 http://www.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
- 63 http://paweldecowski.github.com/jQuery-CreditCardValidator/
- 64 http://davidwalsh.name/validate-credit-cards
- 65 http://www.egrappler.com/jquery-credit-card-validation-plugin-smart-validate/
- 66 http://paweldecowski.github.com/jQuery-CreditCardValidator/
- 67 http://textextjs.com/
- 68 http://textextjs.com/
- 69 http://labs.voronianski.com/jquery.avgrund.js/
- 70 https://github.com/hakimel/avgrund/
- 71 http://labs.voronianski.com/jquery.avgrund.js/
- 72 http://documentcloud.github.com/visualsearch/
- 73 http://elclanrs.github.com/jq-idealforms/
- 74 http://elclanrs.github.com/jq-idealforms/
- 75 https://github.com/Kicksend/mailcheck
- 76 https://github.com/Kicksend/mailcheck
- 77 http://rickharrison.github.com/validate.js/
- 78 http://rickharrison.github.com/validate.js/
- 79 https://github.com/blueimp/jQuery-File-Upload
- 80 https://github.com/blueimp/jQuery-File-Upload
- 81 http://jamescryer.github.com/grumble.js/
- 82 http://projects.nickstakenburg.com/tipped
- 83 http://jamescryer.github.com/grumble.js/
- 84 http://bootboxjs.com/
- 85 http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/
- 86 http://bootsnipp.com/
- 87 http://bootboxjs.com/
- 88 http://designwithpc.com/Plugins/ddSlick
- 89 http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/
- 90 http://designwithpc.com/Plugins/ddSlick
- 91 http://needim.github.com/noty/
- 92 http://needim.github.com/noty/
- 93 https://github.com/danpalmer/jquery.complexify.js
- 94 https://github.com/danpalmer/jquery.complexify.js
- 95 http://www.mitya.co.uk/blog/2012/Jan/Numberfy-add-line-numbers-to-your-textareas-198
- 96 https://github.com/OliverJAsh/FormAccordion
- 97 https://github.com/remybach/jQuery.superLabels
- 98 https://github.com/wwwtyro/cryptico
- 99 http://daneden.me/baseline/
- 100 http://daneden.me/baseline/
- 101 https://github.com/ftlabs/ftcolumnflow
- 102 https://github.com/ftlabs/ftcolumnflow
- 103 http://jbrewer.github.com/Responsive-Measure/
- 104 http://jbrewer.github.com/Responsive-Measure/
- 105 http://artequalswork.com/posts/on-widows.php
- 106 http://artequalswork.com/posts/on-widows.php
- 107 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
- 108 http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
- 109 http://fittextjs.com/
- 110 http://fittextjs.com/
- 111 http://fittextjs.com/
- 112 http://kerningjs.com/
- 113 http://kerningjs.com/
- 114 http://www.frequency-decoder.com/demo/slabText/
- 115 http://www.frequency-decoder.com/demo/slabText/
- 116 http://josscrowcroft.github.com/money.js/
- 117 http://josscrowcroft.github.com/money.js/
- 118 http://josscrowcroft.github.com/accounting.js/
- 119 http://josscrowcroft.github.com/accounting.js/
- 120 http://momentjs.com/
- 121 http://momentjs.com/
- 122 http://pragmaticly.github.com/smart-time-ago/
- 123 http://pragmaticly.github.com/smart-time-ago/
- 124 https://github.com/cjstewart88/sortByTimeAgo
- 125 http://lipka.github.com/piecon/
- 126 http://lipka.github.com/piecon/
- 127 https://github.com/makeable/Notificon
- 128 http://viget.com/inspire/jquery-stick-em
- 129 http://viget.com/inspire/jquery-stick-em
- 130 http://countdownjs.org/
- 131 https://github.com/manuelbieh/geolib
- 132 https://github.com/manuelbieh/geolib
- 133 https://github.com/ScottHamper/Cookies
- 134 http://www.ravelrumba.com/blog/firstimpression-js-library-detecting-new-visitors/
- 135 https://github.com/carhartl/jquery-cookie
- 136 http://lab.rog.ie/chirp/
- 137 http://lab.rog.ie/chirp/
- 138 http://monkeecreate.github.com/jquery.simpleWeather/
- 139 http://gildas-lormeau.github.com/zip.js/
- 140 https://bitbucket.org/lindenlab/llsd/raw/7d2646cd3f9b/js/typedarray.js
- 141 http://stringjs.com/
- 142 http://jvectormap.com/
- 143 http://jvectormap.com/
- 144 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
- 145 http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
- 146 http://hpneo.github.com/gmaps/
- 147 http://gmap3.net/
- 148 http://hpneo.github.com/gmaps/
- 149 http://leaflet.cloudmade.com/
- 150 http://leaflet.cloudmade.com/
- 151 http://twostepmedia.co.uk/svgeezy/
- 152 http://twostepmedia.co.uk/svgeezy/
- 153 http://retinajs.com/
- 154 http://www.justgage.com/
- 155 http://www.justgage.com/
- 156 http://arborjs.org/
- 157 http://arborjs.org/
- 158 http://timeline.verite.co/
- 159 https://github.com/VeriteCo/Timeline
- 160 http://wordpress.org/extend/plugins/timeline-verite-shortcode/
- 161 http://timeline.verite.co/
- 162 https://github.com/filamentgroup/unicon
- 163 https://github.com/adamdbradley/foresight.js
- 164 http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
- 165 http://www.smashingmagazine.com/wp-content/uploads/2012/08/nl-2.jpg
- 166 http://code.shutterstock.com/rickshaw/
- 167 http://code.shutterstock.com/rickshaw/
- 168 http://www.flotcharts.org/
- 169 http://www.flotcharts.org/
- 170 http://stoicloofah.github.com/chronoline.js/
- 171 http://stoicloofah.github.com/chronoline.js/
- 172 http://square.github.com/cubism/
- 173 http://square.github.com/cubism/
- 174 http://www.humblesoftware.com/envision
- 175 http://www.humblesoftware.com/envision
- 176 http://selection.datavisualization.ch
- 177 http://selection.datavisualization.ch
- 178 http://jqfundamentals.com/
- 179 http://jqfundamentals.com/