Forms

June 25, 2013 JavaScript no responses # , , ,

Progression.js – Real-Time Hints & Progress Feedback For Forms

Progression.js is a jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled).

Web users are experienced in filling standard forms like contact or comment forms. For non-standard forms, it is always a good idea to inform users about the data expected.

Progression.js

Continue reading

May 15, 2013 jQuery no responses # , , , , ,

noUiSlider – Fantastic Range Slider For jQuery

jQuery UI’s slider widget have all the features needed for a jQuery range slider: working as a single or range slider, default values and man/maxvalues. However, the smallest download size for it was still ~40kb. Too much for a slider.

jQuery Range Slider - noUiSlider

Another one is noUiSlider. It have all the things needed and with a size of 2.7kb. There is support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values.

Also, it works on touch devices and can be customized with CSS completely. Just a perfect widget for any UI.

Requirements: jQuery
Compatibility: All Major Browsers

Website: http://refreshless.com/nouislider/
Download: http://refreshless.com/nouislider/download/

February 27, 2013 jQuery no responses # , , , , , ,

Spectrum – Perfect jQuery Color Picker Plugin

Spectrum is a jQuery colorpicker plugin that probably comes with allВ theВ features you are looking for. It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the

input[type=color]

of HTML5.

Spectrum - jQuery Colorpicker

The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.

It has support for color palettes by storing/displaying the colors you chose, the default selected color can be set or it can be configured to only display the palette with pre-defined colors.

Alpha transparency selection is available, can be always visible (without clicking to a picker icon) and supports multiple color formats.

Spectrum can be customized with CSS and it works on mobile as well.

 

Compatibility: All Major Browsers
Requirements: jQuery
Website: http://bgrins.github.com/spectrum/
Download: http://github.com/bgrins/spectrum
February 21, 2013 jQuery no responses # , , , , , , ,

Typeahead.js – A jQuery Autocomplete Plugin By Twitter

Twitter has open sourced a very nice project – Typeahead.js – for building smart auto-complete form fields.

It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling.

Typeahead.js

The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly.

Typeahead.js simply converts any textfield into an auto-complete field, accepts JSON as the data source and has various settings for optimizing remote requests (rate limiting, maxConcurrentRequests, etc.).

 

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://twitter.github.com/typeahead.js/
Download: https://github.com/twitter/typeahead.js
January 26, 2013 jQuery no responses # , , , , ,

Dropzone.js – Drag and Drop File Uploads

Dropzone.js is a JavaScript library that simplifies creating a drag and drop file upload functionality. It works with jQuery and works almost out-of-the-box by giving a special class name to any form.

Dropzone.js

Multiple files can be uploaded at the same time where previews of images can be displayed as well. There are also options for defining the max file size, thumbnail dimensions (if they will be generated), enable/disable previews and more.

And many events exist for interacting with the drag-drop and upload status.

Requirements: jQuery
Compatibility: All Modern Browsers

Website: http://www.dropzonejs.com/
Download: https://github.com/enyo/dropzone

Pin It on Pinterest