jQuery.suggest is a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke. Tab or Enter will accept the suggestion and update the input field accordingly.
If more than one match is found, a small indicator will appear underneath the input (you can still it via CSS as you wish). The user can then use the arrow up/down keys to cycle through the options.
Requirements: jQuery Framework
Demo: http://polarblau.github.com/suggest/
License: MIT, GPL License
The jQuery ContextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike the other similar plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.
The contextMenu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible. The contextMenu knows the two callbacks show and hide which can be used to update the state of commands within the menu. This allows en/disabling commands, changing icons or updating the values of contained <input> elements.
Requirements: jQuery Framework
Demo: http://medialize.github.com/jQuery-contextMenu/
License: MIT License
Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes tons of great tools and elements that’ll get you up and running in no time.
Within global.css you’ll find The Grid, a layout framework that works on mobile devices, small screens and full-on modern desktops. It’s a twelve column, semi-liquid, mobile-scaling grid of awesomeness that you’re gonna love. It even supports arbitrary nesting.
Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff. Foundation is MIT-licensed and absolutely free to use.
You should also look at Twitter Bootstrap Toolkit we mentioned earlier too. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and etc.
Requirements: –
Demo: http://foundation.zurb.com/
License: MIT License
fcbkListSelection is a fancy item selector, just like the friends selector you can see on Facebook. It is built with jQuery javascript framework, with wide range of options. You can check out the Demo here and download the source code on Github. fcbkListSelection is released under MIT license.
Requirements: jQuery Framework
Demo: http://www.emposha.com/demo/fcbklistselection/
License: MIT License
JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.
JS Bin allows you to edit and test JavaScript and HTML. Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required. JS Bin was built by Remy Sharp and is completely open source and available on http://github.com/remy/jsbin.
You can also check out JSFiddle, which is a handy online editor for JavaScript too.
Requirements: –
Demo: http://jsbin.com
License: MIT License
Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.
Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions. Popcorn has dozens of plugins for common services and APIs, ranging from Twitter, to Maps, to media events, and more. But if it doesn’t do what you need right now, you can write your own plugins quickly and easily.
Requirements: –
Demo: http://mozillapopcorn.org/popcornjs/
License: MIT License
Have you ever create a really good looking interactive map using HTML5 and jQuery? MigrationsMap.net allows you to see for every country X in the world either the top ten providing countries of lifetime migrants to X or the top ten receiving countries of lifetime migrants from X.
On top of that, when you let your mouse hover over a country, you can see the total population, the GDP per capita, the HIV and Tuberculosis prevalences and the death rate of children under five. All the code of the site and the scripts used to produce it are available on github.
Requirements: HTML5 and jQuery
Demo: http://migrationsmap.net
License: MIT License
Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.
CSS animations are supported in Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft have also promised support for Internet Explorer 10, and support has been announced for Opera 12.
Animate.css is actually built to complement tools like jQuery. Use something like Modernizr to detect support for CSS3 animations, then use jQuery or another library to provide fallback animations for the browsers that don’t support them. It’s a win-win situation.
Requirements: CSS3 Browsers Support
Demo: http://daneden.me/animate/
License: MIT License
JavaScript today is capable of generating a lot of data. The easiest way to deliver multiple files to your users is in a zip file. Instead of wasting server resources and bandwidth you can get the client to do it for you.
JSZip creates .zip files with Javascript automatically for you. The biggest issue with JSZip is that the filenames are very awkward, Firefox generates filenames such as a5sZQRsx.zip.part, and Safari isn’t much better with just Unknown.
Requirements: Javascript Enabled
Demo: http://jszip.stuartk.co.uk/
License: GPL v3 and MIT License
CSS Dock (V2) is an experiment mimicking the Dock of OS X using only CSS. Labels, animations, reflections and indicators… it’s all there. This is Version 2 of my CSS Dock featuring leaner code and better documentation.
The dock works best in current WebKit browsers (Safari and Chrome) but the good news is: it degrades quite gracefully. So while you won’t get all effects in all browsers, the experience won’t be broken either (except for IE, of course).
Requirements: Webkit Browsers
Demo: http://michaelhue.com/cssdock/
License: MIT License
