Flexdatalist is (another) jQuery autocomplete plugin with support for datalists.

After searching and not finding a standalone, lite (not dependent on jQueryUI), autocomplete that did everything I needed for a project, I created Flexdatalist.

Along with many other cool features, Flexdatalist allows you to style the list of suggested data/values, which is not possible at the moment with browser’s native

Hope it’s useful to you as it is to me. Enjoy ;)

Timedropper is a jQuery UI timepicker. Its very unique in style, and adds a touch of polish to any page it’s on. Manage time input fields in a standard form. Focus on the input to open an small interactive timepicker.

Illustration by akselkreis

HTML5 Upload Image, Ratio with Drag and Drop is a tool to help you upload images, making full use of HTML5 with canvas. The drag and drop feature makes this an ideal, and easy, solution for use in a content management system.

Key features include:

• Use canvas to crop images (no server scripts needed)
• Full HTML5 support
• Touch support so everything works great on tablet and mobile devices
• Responsive design
• Save images with AJAX or use the traditional FORM input file element
• Uses ratios to fit screens or elements
• Easy to use
• Additional options to configure
• Works with Bootstrap 3.1
• Works with jQuery 1.9

HTML5 Upload Image is a premium tool and is available from the Envato Market for $11, which includes quality checks, future updates and 6 months of support.

Drag and Drop is a full website and content management system back end with an included database. This plugin works with that system to create three options for using and displaying sortable lists with jQuery, CSS, mySQL, AJAX and PHP.

The first example populates the list from the database, allows you to sort the order, then allows you to save he list using ajax functionality so the page does not reload. In addition, there is a message box that shows the status of whether the boxes have been moved and not saved and whether changes have been implemented to the database.

The second example is a simple sort list that allows you to produce a list of varying length and apply a drag and drop feature.

The third example shows how the functionality can work across a multiple column format.

This tool works across a variety of platforms and includes support for touch devices and lets you save lists via a cookie session. Drag and Drop Sortable Lists is available from the Envato Market for $5. The license includes future updates and has been quality checked by Envato. Additional support is also available.

Dropify is a tool that helps you create stylish input field. This is a great little tool if you are sick of plain inputs and want to showcase some of your design finesse.

The plugin comes with a drag and drop default file style or you can add your own text or images for a truly custom look. You can also set the height of the input box, combine options, disable the input altogether, add a maximum file size or use events.

And it all works with a little jQuery magic. Just clone in the project in your workspace, download the package, compile the assets and you are ready to roll with Dropify. (It is important to note that you have to include the js, CSS and fonts files for everything to work smoothly.)

With the available options, Dropify has plenty of documentation to help you set everything up and get moving quickly. The options are intuitive and easy to set.

jCalculator is an awesome jQuery plugin for calculator inputs.

What’s nifty about this tool is that you can add a calculator to almost any frame within a layout. Need a calculation in a search box? No problem.

The simple calculator design fits into a variety of aesthetics and performs all the basic functions you would expect, such as addition, subtraction, multiplication and division. The tool just pops up when the use navigates to the proper location on the screen. You figure and then keep figuring numbers using the keyboard or mouse with answers populating right on screen.

Plus jCalculator is easy to install and run. Just include the proper lines of code before the body tag close. (You can fin everything you need in the documentation.) Then call the plugin. That’s it!

Stretchy makes form element autosizing the way it should be, meaning that every text element box in your design expands to fit text inputs beautifully. (Everybody likes when things just happen automatically, right?)

This plugin can handle multiple form controls from text areas to inputs to selection menus. It has a tiny footprint at only 1.5 kb minified and is a standalone tool with no jQuery or other dependencies. It works with existing HTML and CSS — a real bonus if you want to add it to a site you already have. Stretchy also automatically accounts for newly added controls, requires to javascript knowledge to use and works in all modern web browsers, including Internet Explorer 9+.

Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX), but if you do need API methods, they are available in the documentation.

To use, just include the script anywhere in the website and you are ready to go!

Codepad is a place for developers to save & share code snippets. Join the community we can’t wait to let you in!

Save snippets online at Codepad making them easily accessible and all in one place. Become a Codepad member you get a sweet user profile where you can add a bit about yourself. There are various stats available we count snippet views, likes, downloads, comments, the list goes on.

When saving any snippet you have the option to make it public, part private or private. With your snippets saved online you can access your code snippets anywhere. Liking a snippet will keep a reference in your dashboard making it easy to find later.

This web color picker works very much like the color tools in Microsoft Office 2010 for a UI widget that is intuitive. The Evol.ColorPicker plugin works inline or as a popup bound to a text box.

The plugin comes ready to go with a few preset color themes including light, dark, redmond, sunny and le-frog.

When displayed, the tool shows as a box containing theme and standard colors, allowing a click to choose each color selection. Each clicked color also displays its value for even more ease of use. The tool also includes a honeycomb-style color picker that displays varying hues and color values.

Evol.ColorPicker requires a jQuery UI theme to be present and the included base CSS file. Add the proper tagging, and the widget is ready to use.

It also comes with a few customization options such as the default color value, default color palette, type of display indicator, history, hide and show options and transparency. The plugin works with modern browsers and has been tested with Internet Explorer 7+, Firefox 9+, Chrome 21+ and Safari 5+.

This nifty little tool is nice because of its intuitive nature; it looks like something most users are already comfortable using.

datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for input fields.

It supports 16 different language formats and is easy to use. The plugin only requires three bits of code for activation — head, body and end. The tool is also easy to modify so that it fits the aesthetics of any website outline — just edit the CSS in the datedropper folder and you’ll have a custom plugin.

This tool has plenty of practical applications. Use it to add dates to an an or website, set an itinerary for an upcoming event or even set an expiration date for a digital product.

When it comes to customization, you have plenty of options to choose from there as well; alter the date format, animation style, colors, language, text, number of years included, borders and strokes, shadows and boxed elements. And you can do it all with just a few clicks with datedropper. Find it on GitHub and see for yourself.

Payment Info is a one-line, mobile friendly credit card input tool. The idea behind this plugin is to create a more streamlined credit card entry process.

The plugin was inspired by Luke Wroblewski’s thoughts on streamlining the collection of payment information by using input masks:

“Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.”

This is the concept employed by this simple plugin. The tool helps to seamlessly guide the user through the needed inputs to complete a transaction, but without having to navigate through multiple fields to accomplish this task.

Payment Info results in an easy tool that contributes to usability for your website.

This small plugin to style forms uniformly across all devices is easy to use and customize.

Formplate is available as a downloadable zip file, on Github and is also included automatically with Webplate downloads.

The plugin is best installed using Bowser and integrating Formplate requires jQuery and Modernizr, as well as dropping a copy of the css/icon-font-formplate folder into the CSS folder where the plugin will reside. Then to activate, you need to wrap form elements in a containing element with the class formplate and call the formplate plugin.

Then you are ready to use. The final step is to customize the plugin with a color scheme that matches your site aesthetic. You can also choose the desired color of your form hover and active states by adding a data attribute to the body tag. The color selections are grey, black, white, aqua, blue, green, orange, pink, purple, red, yellow, asbestos, asphalt, bondi-blue, grey-blue and silver.

PleaseJS is a simple way to help create randomly-generated color schemes for different types of projects. (So if you can’t settle on a hue or love the idea of a more whimsical color palette, this is the plugin for you.)

The plugin uses the hue-saturation-value (HSV) color model to create rainbow-style combinations that are naturally pleasing to the eye. It will also generate color schemes based on a single hue.

The little plugin is then packed with lots of other cool options. You can adjust the hue, saturation, value, base color, grayscale options, “golden-ness” which is color derived from the golden ratio and format. It reads different color types — RGB, HSV and HEX. (And will allow you to convert colors between formats without having to look them up.)

Once installed you can make a color scheme using this plugin for a default color palette for your site or create an entire color scheme based on the options built into the tool. Scheme options include concepts based on color theory and the color wheel — monochromatic, complementary, split-complimentary, double-complimentary, analogous and triadic — for almost perfect combinations every time.

Waves is a click effect tool inspired by Google’s Material Design. The plugin adds a simple wave (or ripple) to buttons and other user interface elements to show users that they have clicked the item.

The action event tool works with jQuery and Javascript event handlers such as Snarl.

You can get Waves pretty easily. Just download the file and install with Bower or NPM. Include the CSS and Javascript and its ready to use. For more advanced developers, the file is also available via LESS, SCSS, and SASS source.

Once Waves is installed, you can adjust a couple of simple parameters if you like and initialize the plugin. Waves works with all modern browsers including Internet Explorer 10+, Chrome 14+, Firefox 9+, Safari 5.1+, Opera 11.6+, iOS 6+, Windows Phone 8.1 and Android Browser 4+.