jQuery Roundup: jQuery 1.7 Beta 1, Sensible DateTime, Slim Milo Animation

2011-10-04 15:00

jQuery Roundup: jQuery 1.7 Beta 1, Sensible DateTime, Slim Milo Animation

by

at 2011-10-04 07:00:00

original http://feedproxy.google.com/~r/dailyjs/~3/DI5qu725XHU/jquery-roundup

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

jQuery 1.7 Beta 1

jQuery 1.7 beta 1 has been released, and this version looks significant with a new events API and major underlying event code changes to improve Internet Explorer support.

The new events API is pretty simple on the surface: $.on and $.off have been added, which attach or remove events. However, the intention behind this is to effectively combine the existing APIs for .bind, .live. and .delegate. The rationale behind this is to remove some “surprising interactions” caused when mixing bind and live events. This is fully explained on the jQuery blog’s 1.7 announcement.

Sensible DateTime

Sensible DateTime (GitHub: crossbreeze / jquery-sensible-datetime, License: MIT) by Jaewoong Kim is a plugin for formatting ISO times. Formatting strings are supported, as well as natural language relative times — for example, “2 minutes ago” rather than a date and time.

To use it, call $('.datetime').sensible() on an element with either a datetime or title attribute, and make sure it contains a ISO8601 datetime string.

The last time I solved this problem I’m fairly sure I used an ancient scrap of code by John Resig. This library looks neatly written and has some fixes to support older browsers like IE6, so I’m going to use it the next time I’m dealing with client-side dates.

The Slim Milo Affair

The Slim Milo Affair is a tutorial with jQuery source that details the creation of a Pablo Ferro-inspired animation. The author wanted to employ a similar effect to Ferro’s animation used by the Thomas Crown Affair title sequence.

The basic concept of the library is that you have a single DOM element that you want to animate with various “stages”. Each stage consists of a main image shown in full, a set of horizontal and vertical bars, and a set of sub images put into the “slots” defined by the bars.

It’s interesting to read through the reasoning behind this type of animation design, because we often use animation libraries without much thought to how they actually work.