jQuery Roundup: TOC, Curtain.js, Griffin.editor, imgg

2012-02-28 00:00:00 +0000 by Alex R. Young
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


TOC (GitHub: jgallen23 / toc, License: MIT) by Greg Allen will generate a table of contents for a page, and automatically highlight the current section. Basic usage is simply $('#toc').toc();, but it supports some configuration options as well:

  'selectors': 'h1,h2,h3',   // elements to use as headings
  'container': 'body',       // element to find all selectors in
  'smoothScrolling': true,   // enable or disable smooth scrolling on click
  'prefix': 'toc',           // prefix for anchor tags and class names
  'highlightOnScroll': true, // add class to heading that is currently in focus
  'highlightOffset': 100     //offset to trigger the next headline

The design of the plugin allows multiple tables of contents to be used on a page, and the author is planning to add support for Zepto and Ender.


Curtain.js (GitHub: Victa / curtain.js, License: MIT) by Victor Coulon and submitted by Hirvesh displays pages using an effect similar to a slide show. It supports keyboard shortcuts and conventional scrolling. The panels that make up the page will automatically resize to fill the window.

The plugin is invoked by $('.curtains').curtain() and expects an ordered list:

<ol class="curtains">
  <li class="cover">your content</li>
    <div class="fixed"> <!-- if you need a "fixed" content -->
      Fixed content

Panels can also be added dynamically using $('.curtains').data('plugin_curtain').insert().


Griffin.editor (GitHub: jgauffin / griffin.editor, License: MPL) by Jonas Gauffin is a jQuery-enhanced, zero configuration, textarea. It supports markdown, but the author notes other formats are easily supported, access keys, and syntax highlighting. It uses jQuery UI, and is easily set up with a call to $('.editor').griffinEditor() and suitable HTML.

The griffin.editor / Demos folder contains examples of how to use the plugin.


imgg (GitHub: bugzu / imgg, License: MIT) by Gaurav Sharma displays images using an animated mosaic effect. It's used by passing an array of image locations to $().imgg:

  images: ['images/img11.png', 'images/img22.jpg', 'images/img33.jpg']

The author has provided sample images and CSS.