Unheap

A tidy repository of javascript plugins

  • 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

BitBucket: The Git solution for professional teams

Distributed version control system that makes it easy for you to collaborate with your team. Bitbucket is the only collaborative Git solution that massively scales!

With Bitbucket you can:

  • Approve code review more efficiently with pull requests.
  • Hold discussions right in the source code with inline comments.
  • Enjoy flexible deployment models for teams of all sizes and needs.
  • Get unlimited private and public repositories.
  • Bitbucket Cloud is free for small teams of 5.
  • Start in less than 10 seconds. No credit card required.

More than 450,000 teams and 3 million developers love Bitbucket. See what makes Bitbucket the Git solution for professional teams.

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

X

Responsify.js: Subject-aware responsive images

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