A tidy repository of javascript plugins

Gridtab is a lightweight jquery plugin to create grid based responsive tabs, with separate settings for any responsive breakpoint. It’s always a hard task finding the right plugin to solve a common UI design pattern – Grid based responsive tabs. There are only a very few plugins out there, that are either buggy, rely heavily on DOM manipulation or hardly customisable. GridTab works on CSS flexbox layout and hence it’s lightweight.

The web’s first and only complete open source emoji set. It is 100% free and super easy to integrate.

THe goal is to standardize emoji on the web through the use of common :shortnames:.

When storing user inputted text in your database, say from a guestbook or through a CMS admin, you should always make sure you are storing text containing only :shortnames: and not Unicode emoji characters or emoji images. Then, when you are displaying that content to the user, you can convert it server-side with the PHP toolkit provided, or client-side using the Javascript toolkit which is also provided. Demos of this process using Javascript, jQuery, and PHP are included in the repo.

If you are looking for a navigation drawer that is accessible to those with disabilities then look no further. Offcanvas jQuery plugin & CSS3 based off-canvas navigation that uses JavaScript to dynamically add WAI-ARIA roles to make your site navigation more accessible. Here are some of the many features in this well crafted plugin:

• ARIA Design pattern for Dialogs
• The tab key loops through all of the keyboard focusable items within the offcanvas.
• You can close it using Esc.
• Buttons Open/Close with Space & Enter
• BEM Syntax
• Package managers Bower & NPM

Muuri creates responsive, sortable, filterable and draggable grid layouts. They manage to pack a lot of features into a small package. Muuri is basically Packery + Masonry + Isotope and jQuery UI sortable.

Muuri’s layout system allows positioning the grid items within the container in pretty much any way imaginable. The default “First Fit” bin packing layout algorithm generates similar layouts as Packery and Masonry. The implementation is heavily based on the “maxrects” approach as described by Jukka Jylänki in his research A Thousand Ways to Pack the Bin. However, you can also provide your own layout algorithm to position the items in any way you want.

Muuri uses Velocity for animating the grid items (positioining/showing/hiding) and Hammer.js for handling the dragging. Hammer.js is an optional dependency that is only required if dragging is enabled, but Velocity is a hard dependency.

And if you’re wondering about the name of the library “muuri” is Finnish meaning a wall.

A word of warning. Muuri is currently under active development and might be still a bit rough on the edges so production use is not recommended just yet. But when did that ever stop you ;)

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

This jQuery plugin allows you to display a list as a set of boxes that can be ordered and filtered as desired.

Features

– filtering and sorting options available
– supports unlimited number of elements
– animation and CSS customizable
– boxes are href-able

Illustration by akselkreis

Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

Illustration by akselkreis

scrollReveal.js is plain vanilla JS library that allows you to reveal elements as they enter the viewport. It’s remarkable in that it’s only 3kb minified, that’s small. The range of effects you can choose are vast, and it uses natural language to define the animation you want to run. No need for CSS3 transition and a script to detect the current page position in the browser window. Use ScrollReveal and be done with it!

A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Illustration by akselkreis

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

A plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.
Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it.

Marginotes works by adding a desc attribute to an HTML element, which will be displayed as a tooltip:

It works with links, as well as with <span> elements.

Illustration by akselkreis

Cropper is a simple jQuery plugin (also available in vanilla JS) that allows you to easily add image cropping to your app. For a simple plugin, it’s fairly robust, features include:

• 39 options
• 27 methods
• 7 events
• touch (mobile)
• zooming
• rotating
• scaling (flipping)
• multiple croppers
• crop on a canvas
• crop image in the browser-side by canvas
• translate Exif Orientation information
• Cross-browser support

Illustration by akselkreis

A jquery plugin that makes images truly responsive, without sacrificing anyone’s face.

When images are used in a responsive container on web design, because the container can change to any width:height ratio, a group shot could end up cutting off people’s faces. A nice photograph following “rule of third” could end up with no object in view. Responsive images face the challenge of how to keep the focused objects/area in view, this jquery plugin is here to solve the problem.

Responsify.js does the following:

1. It allows you define a focus area on an image using data-focus-xxx tag
2. It takes in the focus area data from the image, calcuate the image’s container’s size, resize and position the image accordingly, make sure the focus area is always in view and in the best position possible

Responsive image with responsify.js

Responsive image without responsify.js

Illustration by akselkreis