The JavaScript blog.


jquery mobile plugins effects

jQuery Roundup: 1.9, UI 1.10, Maskew

Posted on .

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

jQuery 1.9 Beta 1

jQuery 1.9 Beta 1 has been released, and this version removes previously deprecated features so you'll want to pay attention. Fortunately, Dave Methvin has been working on jquery / jquery-migrate, which is a plugin for figuring out which deprecated features are being used in your projects. The development version shows console warning messages, and these are stored in jQuery.migrateWarnings for browsers that don't support console. There's a full list of the warnings in jQuery Migrate Plugin - Warning Messages.

The focus of 1.9 has been API cleanup, and there's also a jQuery 1.9 Upgrade Guide, where these API changes have been documented.

jQuery UI 1.10 Beta

jQuery UI 1.10 Beta is out. This version features a new API for the Dialog widget, and a redesigned Progressbar API.

There are major API changes in 1.10, so if you haven't updated to 1.9 yet then you might want to read through the 1.9 upgrade guide.


Get skewed.

Maskew (GitHub: dmotz / maskew, License: MIT) by Dan Motzenbecker is a small plugin that can skew elements along a specified angle. It has an optional jQuery plugin, but also has a simple prototype class API. It has support for touchscreen events, specified by passing { touch: true } as an argument.

Dan has included the build script and some tests.


jquery plugins jqueryui effects

jQuery Roundup: jQuery Color 2.1.0, jQuery UI 1.9 RC, Avgrund Modal

Posted on .

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

jQuery Color 2.1.0

jQuery Color 2.1.0 (GitHub: jquery / jquery-color, License: MIT) has been released. This plugin includes lots of methods for defining, parsing, and otherwise manipulating and animating colours. Version 2 includes new API methods that allow colours to be created and modified, and this includes support for RGBA and HSLA colours and animations.

Here are some examples of the plugin in use:

// String colour parsing

// RGB
$.Color(255, 0, 0);

$.Color(255, 0, 0, 0.8);

// Objects work as well
$.Color({ red: red, green: green, blue: blue, alpha: alpha });

// Getters and setters
$.Color(255, 100, 130)
  .green(); // 101

// Conversion
$.Color(255, 100, 130).toRgbaString(); // 'rgb(255,100,130)'

jQuery UI 1.9 RC

jQuery UI 1.9 RC has been released, and updates jQuery to 1.8 and jQuery Color to the 2.0 series. The jQuery UI team are also working on upgrading the project's infrastructure:

We're working on a new web site, new download builder, and new documentation site to accompany the new release.

Avgrund Modal


Avgrund Modal (GitHub: voronianski / jquery.avgrund.js, License: MIT) by Dmitri Voronianski is a modal plugin that attempts to create the impression of depth as the modal appears on the page. The main content zooms out as the modal appears -- the overall effect is surprisingly slick. Basic usage is $(selector).avgrund(), but the plugin has lots of options:

  width: 380
, height: 280
, showClose: false
, showCloseText: ''
, holderClass: ''
, overlayClass: ''
, enableStackAnimation: false
, template: 'Your content goes here..'

This plugin is based on the Avgrund concept by Hakim El Hattab.


jquery ui plugins editors effects

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

Posted on .

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.


jquery html5 plugins routing effects

jQuery Roundup: 1.6.1, Davis.js, diagonalFade

Posted on .

jQuery 1.6.1 Released

jQuery 1.6.1 was released last week which is
the version with the new .prop() method and changes to
.attr(). I've been talking about this in the Let's Make a
posts covering
element attribute reader implementations.


Davis.js (GitHub: olivernn / davis.js) by olivernn uses
history.pushState to create an Sinatra/Express-like API for
client-side apps:

var app = Davis(function () {
  this.get('/welcome/:name', function (req) {
    alert("Hello " + req.params['name'])


One interesting thing about this library is it has a plugin
which can be used to share routes
between applications. It also has an event API, which includes an
unsupported event for falling back in browsers that don't support pushState.


diagonalFade (GitHub: jonobr1 / diagonalFade, License: Apache 2.0) by Jono Brandel is a diagonal matrix fade effect
for jQuery. It's got quite a few options for configuring the effect:

  time: 100,
  fadeDirection_x: 'left-right', // "left-right" || "right-left"
  fadeDirection_y: 'top-bottom', // "top-bottom" || "bottom-top"
  fade: 'out',                   // "in" || "out"
  complete: null                 // callback function