X

Flexdatalist: jQuery autocomplete with support for datalists

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 ;)

  • Vanilla
X

mark.js: JavaScript keyword highlighter

formerly known as jquery.mark or jmHighlight, mark.js is a text highlighter written in JavaScript and jQuery. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.

X

Timedropper: A better UI timepicker

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.

TimeDropper

 

Illustration by akselkreis

  • Vanilla
X

ContentTools: A beautiful & small content editor

ContentTools is a collection of small, flexible, extensible and framework agnostic JavaScript libraries for creating beautiful WYSIWYG editors for HTML content.

The ContentTools WYSIWYG editor can be added to any HTML page in a few simple steps.

Illustration by akselkreis

  • Paid
X

HTML5 Upload Image: Drag and Drop Plugin

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.

  • Paid
X

Drag and Drop Sortable Lists

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.

  • Vanilla
X

Sortable: JavaScript Library for Reorderable Drag-and-drop Lists

Sortable is a minimalist Javascript library that helps you create reorderable, drag and drop lists for modern web browsers and touch devices. And it does not use jQuery!

The tool comes with plenty of other nifty features as well, such as

  • CSS animation when moving items
  • Support for drag handles and selectable text
  • Smart auto-scrolling
  • Support for meteor, AngularJS, React and Polymer
  • Supports any CSS library (such as Bootstrap)
  • Has a simple API
  • Allows dragging within a list or between lists

Sortable is packed with customization options as well including sorting, delay, filtering, ghost classes, fallbacks, and scrolling sensitivity and speed.

Sortable comes with plenty of documentation to help you get started and if you want to go the jQuery route, there’s support and documentation for that as well.

X

Dropify: Override Input Files with Style

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.

  • Vanilla
X

Quick[select]: Selection of Common Options in Select Boxes

Quick[select] is a jQuery plugin for quick selection of common options in select boxes.

Select boxes are a two tap or click operation. They take the user out of the flow of the form, and there are certain answers that are more commonly chosen than others, such as a reply of “yes” or “no.” Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.

Quick[select] prompts a user to an answer, but provides flexibility for questions that need it. The tool uses the browser’s native select list for its overflow, meaning it will work great on all devices.

It’s been tested with jQuery 2, Internet Explorer 11+, Firefox 40+, Chrome 45+, Safari 8+, Chrome on Android and iOS and Safari on iOS, so it should work properly in most applications. Just download the source files from GitHub, include the JS and CSS tags, attach Quick[select] to the appropriate boxes and you are ready to go!

There are a handful of option classes available and some great examples of how to use this tool in the documentation.

  • Spotlight
X

jCalculator: jQuery Plugin for Calculator Inputs

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!

X

Stretchy: Form Element Autosizing

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!

  • Vanilla
X

Dragula: Drag and Drop Plugin

Have you ever wanted a drag and drop library that just works? One that doesn’t depend on bloated frameworks, and that has great support? Then Dragula is precisely what you have been looking for.

This little plugin makes drag and drop easier than you can imagine. Key features include:

  • Super easy to set up
  • No bloated dependencies
  • Figures out sort order on its own
  • A shadow where the item would be dropped offers visual feedback
  • Touch events!
  • Seamlessly handles clicks without any configuration

Install using NPM or Bower, include the CSS files and you are ready to go. (And there’s plenty of documentation if you need help along the way.)

Here’s how it works: By default, Dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that’s not one of the containers, the event will be gracefully cancelled according to the revertOnSpill and removeOnSpill options. (Note that dragging is only triggered on left clicks, and only if no meta keys are pressed.)

There are plenty of options and customizations so you can dictate exactly how this plugin will work on your website.

  • Vanilla
X

List.js: Library for Search, Sort and Filters

List.js is the perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. It is built to be invisible and work on existing HTML.

Features of List.js include that it is simple and invisible, easy to apply to pretty much any HTML, has no dependencies, is fast and super lightweight and can handle thousands of items. It includes a simple template system that adds the possibility of editing, adding or removing items.

It works with modern browsers including Chrome, Safari, Firefox and Internet Explorer 6+.

Examples of usage include partnering List.js with an existing list, with an existing list plus adds, a new list, tables, fuzzy search and pagination.

The tool includes extensive documentation to help you install and use this tool with ease. List and item APIs are also available.

X

Codepad: Organize and Share Code Snippets

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.