DailyJS

DailyJS

The JavaScript blog.


Tagusability
Featured

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

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.

jQuery-menu-aim

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

Toolbar

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

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.

Featured

mobile spreadsheets usability

XLSX.js, Tres, ChromaNope

Posted on .

XLSX.js

XLSX.js (GitHub: stephen-hardy / xlsx.js, License: Microsoft Office Extensible File License) by Stephen Hardy can read and write Excel-compatible XLSX files. It converts base64 strings into object representations of XLSX spreadsheets, without using ActiveX.

It's built using JSZip, and will generate data: URIs with a base64 encoded string that contains the spreadsheet's XML.

Tres

Tres

Tres (GitHub: juliocesar / tres, License: MIT) by Julio Cesar Ody is a mobile framework based on Backbone.js. It provides some convenience classes for working with touch-based gestures and the wide variety of mobile device resolutions, and enough CSS and icons to jump-start development.

Like Backbone.js, Tres has its roots in Rails, so initial versions aim to provide interfaces that work well with Ruby-based projects. This includes console-based tools for generating stub files.

ChromaNope

ChromaNope

ChromaNope by Kris Hedges is a web service designed to illustrate the effects of various forms of colour blindness. It uses Node and PhantomJS to render any web page against the equivalent protanope, deuteranope, and tritanope version. Definitions of these terms can be found on the Wikipedia Color blindness page.