Unheap

A tidy repository of javascript plugins

  • Vanilla
X

Gridder: A thumbnail grid with expanding preview

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

Why was this plugin built?

We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

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

MediumLightbox: Zooming functionality for images

Nice and elegant way to add zooming functionality for images, inspired by medium.com

This plugin reproduce exactly the same code that use Medium to add the smooth transition effect clicking over the images, with some improvement.

Key features

Written in pure javascript for better performance, lightweight and simple.

 

Illustration by akselkreis

X

sdFilterMe: Order and filter <ul> list

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

X

mouseTip: Cursor tooltips that follow mouse movement and position

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

Illustration by akselkreis

X

ScrollReveal: Easy scroll animations for web and mobile browsers

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!

  • 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

Adaptive Backgrounds: Extract color from images and apply to its parent

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

  • Vanilla
X

justContext.js: A simple context (right-click) menu plugin

justContext is a simple context menu plugin that doesn’t require jQuery, but kicks ass anyway. Just about 30 lines of JS and a bit CSS produce a slick plugin that enables fast, easy and styleable context menus. Every HTML element can host it’s own menu. Two themes are included.

Why did you build it?

Other context menu plugins are either unusably cryptic or depend on jQuery, a library that is way too big for a problem this small. justContext is “just a context menu”. It won’t get in your way and is easily hacked.

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

X

ZooMove: dynamically zoom images with mouseover

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+

  • Vanilla
  • Spotlight
X

Tribute.js: ES6 Javascript @Mention Plugin

A New, Lightweight, and Easy to Use ES6 Javascript @Mention Plugin from the Zurb crew. It allows you to quickly choose items from an arbitrary list with special characters.

Why did you build this plugin? Why was it needed?
As part of the unification and rebuild of Notable that we’ve been working on over the past year, we were working with 6 different unique application environments. If we were to require rewriting them all to be consistent before we could introduce new features, we’d never make progress. So for cross-application features, increasingly we’re “going native” to make it easier to use the same libraries for new features across applications.

One of the new features we are working on in Notable is @mentions. @mentions, popularized by Twitter, allow you to call out other people in a conversation. We scoured the net for a open source, native, @mention library and came up with nothing. To solve this problem, we built our own and are excited to open source it as Tribute.

 

Illustration by akselkreis

X

Marginotes: Reveal notes in the margin on hover

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

X

Cropper: A simple jQuery image cropping plugin

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