Unheap

A tidy repository of javascript plugins

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

  • Spotlight
  • Video
X

smoothState.js: Unobtrusive page transitions with jQuery.

We’ve accepted the jankiness of page loads as a quirk of the web even though there is no technical reason for it. smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.

Why are page transitions necessary?

Imagine, for a second, how disorienting it would be if touching a doorknob teleported you to the other side of the door. Navigating the web feels like using a teleporting doorknob. Layouts change, elements rearrange or disappear, and it takes time for the user to adjust. Smooth transitions reduce the effort it takes for users to get settled into a new environment.

Javascript SPA frameworks, sometimes referred to as MVC frameworks, are a common way to solve this issue. These frameworks often lose the benefits of unobtrusive code. Writing unobtrusive javascript gives us more resilience to errors, and improved performance and accessibility.

How does smoothState.js work?

smoothState.js provides hooks that can be used to choreograph how elements enter and exit the page during navigation. It uses the time the animations are running to fetch content via AJAX to inject into the page.

smoothState.js doesn’t dictate how things on the page should be animated. It supports CSS animations, as well as JS animation libraries like velocity.js.

Design philosophy and requirements

The project’s main goal is to allow developers to add page transitions without having to add any logic to the backend. We keep things unobtrusive at all times.

smoothState.js initializes on containers, not links. Think of a container as a small window object embedded in the page.

Every URL on your site should return a full layout – not just an HTML fragment
The smoothState container needs to have an id set – a unique hook to tell us what to update on the page
All links and forms on the page should live within the container
These requirements makes the website resilient, since it smoothState.js can abort and simply redirect the user if an error occurs. Making each link return a full page also ensures that pages are created with progressive enhancement in mind.

Illustration by akselkreis

  • Vanilla
X

nanobar: Very lightweight progress bars. No jQuery.

Nanobar is a very lightweight progress bar (~699 bytes gzipped). It does not require jQuery. For iE7+ and the rest of the world.

Illustration by akselkreis

X

TextFill: Change font size to fill a container.

This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.

  • Vanilla
X

Slinky: Responsive mobile-like menu plugin

A light-weight, responsive, mobile-like menu plugin.

It’s an update to a previously submitted plugin; http://www.unheap.com/navigation/horizontal-tabbed/sliding-menu/

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

  • Vanilla
X

Minigrid: Cascading grid layout without pain

Minigrid is a minimal (2kb), zero dependency cascading grid layout plugin. Its responsive and even has the ability to add animations. It’s a great option if your cards are all going to be the same width. If your cards have different width sizes or you need more control I’d recommend Isotope

X

mediaWrapper: Responsive iframe video

iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.

Illustration by akselkreis

  • Video
X

SecretNav: Nav menu revealed with 3d effects

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

The plugin requires jQuery 1.7 or higher, and Modernizr.

SecretMenu Demo

Illustration by minnix

  • Vanilla
X

Luminous: A no-dependencies JavaScript lightbox

Luminous is a simple, lightweight, no-dependencies JavaScript lightbox. Out of the box the styling is very basic, so you will want to style it to your needs. They do provide a basic theme to get you started.

It supports the latest version of Google Chrome and the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4).

Illustration by minnix

X

scrollSpeed: For custom scrolling speed and easing

scrollSpeed is a lightweight jQuery extension for custom scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing. After setup, reference the scrollSpeed() method and modify the step and speed parameters to create the desired scrolling effect. The step parameter defaults to 100 units, while speed defaults to 800 milliseconds; custom easing is optional.

Illustration by akselkreis

X

AnchorScroll.js: A plugin for smooth scrolling to anchor targets

If you are looking to add a little flair to your anchor scrolling, this plugin can help. AnchorScroll.js is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets that can also add classes to elements on scroll events. You can add blur effects, bounce effects or even text to let your user know you are scrolling to the right spot.