The JavaScript blog.


jquery plugins menus pagination usability toolbars

jQuery Roundup: jQuery-menu-aim, Toolbar, ngInfiniteScroll

Posted on .

Note: You can send your plugins and articles in for review through our contact form.


jQuery-menu-aim (GitHub: kamens / jQuery-menu-aim, License: MIT) by Ben Kamens is a for making large dropdowns in a similar style to Amazon. Ben has written a post about why this is desirable: Breaking Down Amazon's Mega Dropdown.

At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open

Ben made a diagram of this to visualise the area used to detect the mouse.


I thought this was a great piece of work, both from the developers at Amazon and Ben in recognising something interesting was going on behind the scenes. The plugin comes with an example, and has configuration options for integrating it with your existing markup.



Toolbar (GitHub: paulkinzett / toolbar, License: MIT, jQuery: toolbar) by Paul Kinzett is a plugin for quickly creating popup toolbars with icons. The markup is an unordered list, and the toolbar can be oriented both vertically and horizontally.

The plugin includes CSS and icons, so it can be dropped straight into a project and should look similar to the examples on the site.


ngInfiniteScroll (GitHub: BinaryMuse / ngInfiniteScroll, License: MIT, npm: ng-infinite-scroll) is an AngularJS project that depends on jQuery which can help implement infinite scrolling. It's used by adding the infinite-scroll attribute to an element, and then implementing a controller that can fetch data when required.

The remote data demo shows how it works by calling Reddit's JSONP API.


jquery plugins jqueryui menus

jQuery Roundup: SelectBoxIt, jQuery Hooks, jQuery contextMenu

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


SelectBoxIt screenshot

SelectBoxIt (GitHub: gfranko / jQuery.selectBoxIt.js, License: MIT) by Greg Franko is a select box replacement that uses progressive enhancement and has some notable features:

  • Works with jQueryUI ThemeRoller
  • Supports jQuery and jQueryUI's animations
  • ARIA support

It also includes Jasmine tests: SelectBoxIt tests.

The author has written a detailed post documenting SelectBoxIt, and the GitHub repository contains suitable CSS and images if you want to duplicate the style used in Greg's examples.

jQuery Hooks

In jQuery Hooks, Rodney Rehm discusses jQuery's hooks feature. The jQuery.cssHooks documentation covers adding hooks to CSS getters and setters, but there are other hooks in jQuery's code, for .val(), .attr(), and .prop().

jQuery contextMenu

jQuery contextMenu (GitHub: medialize / jQuery-contextMenu, License: MIT and GPL3) from Medialize GbR (and also by Rodney Rehm) helps create menus that appear when an element is right-clicked.

The authors have written lots of examples showing the flexibility of the plugin, including using input elements, dynamically adding new triggers, and access keys.


animation jquery plugins forms sessions menus

jQuery Roundup: TextExt, Tesselate, Promptumenu, Stellar.js, session.js

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.


TextExt (GitHub: alexgorbatchev / jquery-textext, License: MIT) by Alex Gorbatchev is a modular library for enhancing text inputs. It supports features seen before in similar plugins, like a "tag" style UI, auto-completion, and Ajax, but the difference here is the modular design.

The TextExt plugin itself ships with a set of plugins, like Ajax and Autocomplete, that provide the functionality similar plugins keep in their 'core' code:

    plugins: 'autocomplete',
    autocomplete: {
        dropdownPosition: 'above'

Notice that the API design means the plugin only adds a single entry to jQuery's namespace. All of these plugins are documented in the very thorough TextExt manual.

Nethnic Tesselate


Nethnic Tesselate (License: LGPL) is provides some extremely slick grid-based transition effects. Lots of effects are possible, but I like the one shown in Tesselate Demo 1.


Promptumenu (GitHub: natrixnatrix89 / promptu-menu, License: MIT and GPL) by Janis Zarzeckis displays a grid of icons that can be swiped, like the iOS or Android home screens. The author's examples include grids of various sizes and page indicators.

Usage is pretty simple. Given an unordered list with suitably juicy icons, run promptumenu:

  width: 500,
  height: 500,
  rows: 4,
  columns: 4,
  direction: 'horizontal',
  pages: true


Stellar.js (GitHub: markdalgleish / stellar.js, License: MIT) by Mark Dalgleish adds a parallax scrolling effect to an element as it's scrolled. Try dragging the scroll bar on http://markdalgleish.com/projects/stellar.js to see how this works. It's almost like a 16-bit video game!

The basic usage is simply $.stellar(). Effect options can be supplied by using data attributes, like data-stellar-ratio and data-stellar-background-ratio.


This isn't technically a jQuery plugin, but is a useful bit of client-side scripting nonetheless. session.js (License: MIT) by Iain Nash collects information about the current session, like the screen resolution, geographical location, referrers, cookies, and more. This example by the author shows it being used to conditionally display an alert if the visitor came from Facebook:

<script type='text/javascript'>  
  window.session = {
  options: { gapi_location: true },
  start: function(session){ // can also use window.session global.
    if (session.first_session.visits > 1){
      alert('Hi again from ' + session.location.address.city);
    } else {
      if (session.current_session.referrer_info.host.contains('facebook')){
        alert('Hi there from '+ session.location.address.city +'. How about liking us on facebook?');
      } else if (session.current_session.search.engine){
        alert('Did you find what you were looking for from ' + session.current_session.search.engine + '?');
<script type='text/javascript' src="http://codejoust.github.com/session.js/session-0.4.js"></script>  

It sounds like something that could be used to collect interesting statistics on site visitors, but in the past I've used a similar library of my own creation to enhance bug reports. When people filled out a bug report about my web apps I collected their user agent string, screen size and type, and other information that helped me track down rendering issues. So this library could find a lot of uses with a bit of creativity.