The JavaScript blog.


jquery plugins css3 internationalization languages iframes

jQuery Roundup: jQuery.emphasis.js, Tipue Search

Posted on .

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


jQuery.emphasis.js (GitHub: zmmbreeze / jquery.emphasis, License: MIT, jQuery: emphasis) by "mzhou" is a CSS3 text-emphasis fallback.

The author says it's useful for East Asian languages because it adds symbols above or below characters to improve the clarity of emphasised sections. The equivalent CSS currently only works in WebKit with a vendor prefix, so this plugin will be useful to those working with these languages.

The source is quite interesting -- it's based on the CSS3 specification, which involves determining if a character is suitable for emphasis, then the insertion of fairly complex styles to simulate the emphasis marks.

Tipue Search

Tipue image search

Tipue Search (License: MIT) is a site search plugin. It can search static JSON content, or pages on the same origin using Ajax. It also supports an image search mode, which looks for matches in JSON content that points to image URLs.

Given an index, like this:

var tipuesearch = {"pages": [  
  {"title": "Tipue Search, a site search engine jQuery plugin", "text": "Tipue Search is a site search engine jQuery plugin. Tipue Search is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue Search is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/search"},
  {"title": "Tipue drop, a search suggestion box jQuery plugin", "text": "Tipue drop is a search suggestion box jQuery plugin. Tipue drop is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue drop is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/drop"},
  {"title": "About Tipue", "text": "Tipue is a small web development studio based in North London. We've been around for over a decade. We like minimalism with the occasional hint of retro.", "tags": "", "loc": "http://www.tipue.com/about"}

Tipue can be enabled using $('#tipue_search_input').tipuesearch(); on a suitable input element.

Auto Iframe Height Plugin Update

Ilker Guller updated his Auto Iframe Height Plugin (GitHub: Sly777 / Iframe-Height-Jquery-Plugin, License: MIT, GPL) to automatically check the iframe height when the contents change.

To enable automatic resizing, you can use the watcher option passed to $.iframeHeight. It also supports several other options, including: defaultHeight, minimumHeight, and watcherTime.


jquery plugins css3 animations icons

jQuery Roundup: minimit-anima, loda-button

Posted on .

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



minimit-anima (GitHub: minimit / minimit-anima, License: MIT, jQuery: minimit-anima) by Riccardo Caroli is an animation plugin that uses hardware accelerated CSS3 animations with fallbacks for older browsers. The API is queue-based like jQuery's standard animation API. The following example specified an easeOut of 400ms:

$(this).anima({ x: 20, y: 20 }, 400);

Hardware acceleration can be triggered by adding the z co-ordinate and perspective properties:

$(this).anima({ x: 200, z: 0, perspective: 1000 }, 800);

The API has other features, like delaying animations with delayAnima(ms), clearing the queue with clearAnima, and stopping the current animation with stopAnima. Any CSS property can be animated, along with shortcuts for scale[X|Y|Z], rotate, and skew.



loda-button (GitHub: lugolabs / loda-button) by Artan is a small plugin that animates the icon in a button while an asynchronous operation is performed. The recommended markup uses anchors and spans:

<a href="#" class="loda-btn">  
  <span aria-hidden="true" class="loda-icon icon-mail"></span>

And requires a bit of JavaScript to set it up:

var lodaBtn = $('#loda-btn').lodaButton();  

The animation can be triggered by passing start to the button:


The icon fonts are IcoMoon by Keyamoon.


animation jquery plugins css3

jQuery Roundup: jQuery-inlog, -prefix-free, jquery.animate-enhanced

Posted on .

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


jQuery-inlog (GitHub: Prinzhorn / jquery-inlog, License: MIT) by Alexander Prinzhorn is a passive plugin that injects console.log calls into jQuery core. It can help debug selectors and chained calls.

This plugin has several options that can be changed at any time:

  enabled: false,    // Shortcut: $.inlog(true|false);
  thisValue: false,  // Output this-value or not
  returnValue: true, // Output return-value or not
  indent: true       // Indent nested calls or not


-prefix-free (GitHub: LeaVerou / prefixfree, License: MIT) by Lea Verou makes it possible to use CSS properties without vendor strings, adding the required prefixes only when they're required. Every stylesheet in <link> or <style> tags will be processed, and jQuery's $.css() method can be used to get or set CSS properties without prefixes.

The browsers supported are IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome:

In older browsers like IE8, nothing will break, just properties won’t get prefixed. Which wouldn’t be useful anyway as IE8 doesn’t support much CSS3.

There are a few limitations that the author has documented on the project's site: @import stylesheets aren't supported, and neither are cross-origin stylesheets.

The jQuery plugin part of -prefix-free is here: prefixfree.jquery.js. This plugin adds the required changes to allow $.css() to work transparently.


jquery.animate-enhanced (GitHub: benbarnett / jQuery-Animate-Enhanced, License: MIT) by Ben Barnett is an increasingly popular plugin for extending $.animate() to detect CSS transitions for modern browsers. It's tested with jQuery 1.3.2 to 1.6.1 and is even compatible with IE6+.

The plugin will analyse the properties you're animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50+. If the user is on a browser that has no CSS3 transitions, this plugin knows about it and won't get involved.

By including this plugin on a page, jQuery animations should use CSS3 translate where available. Outside of this basic usage, there are also three new options for $.animate():

  • avoidTransforms: Avoid using -webkit-transform or similar to aid hardware acceleration
  • useTranslate3d: Use 3D translations, the author recommends this for iPhone-focused development
  • leaveTransforms: Once transitions are complete, remove them and convert positional values back to the real values

3D support is enabled by default, and can be toggled by using $.toggle3DByDefault().


jquery plugins css3

jQuery Roundup: Color, animate-textshadow, jQuery.forrst

Posted on .

jQuery Color

jQuery Color
(GitHub: jquery / jquery-color, License: MIT,
) version 2 beta 1 has been released. This version has a new API,
RGBA, HSLA, and partial colour animation support. This is the backbone
of jQuery's colour animations, but only now is it being exposed as a
public object.

This new object, \$.Color has a pretty simple API:

// Create a red Color object:
var red = $.Color('rgba(255,0,0,1)');

// Create a red Color object, then make orange:
var orange = $.Color('#FF0000').green( 153 );

// Get the color halfway between red and blue:
var between = $.Color([255, 0, 0]).transition('blue', 0.5);

// Desaturate the background of this element
  backgroundColor: $.Color({ saturation: 0 })
}, 1000);

Anyone who has worked with CSS colour animations will know how useful
this is. It's also going to come in handy when building interfaces for
things like colour picker widgets. I imagine the jQuery UI project will
benefit from this new API.


animate-textshadow (GitHub: alexpeattie / animate-textshadow,
License: MIT) by Alex Peattie is a little plugin for creating
text-shadow animations.

This will make a shadow that slowly moves away from text as if it's
being lifted off the screen:

$('#slow').hover(function() { 
    $(this).animate({textShadow: '#000 -10px -10px 30px'}, 1000);
}, function() { 
    $(this).animate({textShadow: '#259 5px 5px 5px'}, 1000);


jQuery.forrst (License: GPL) by Jason Gerfen is a plugin for the Forrst API. It
currently supports accessing user info, posts, and interestingly offers
AES encryption for local storage.

I initially thought it might be a handy way of creating Forrst widgets
for blogs, but it seems more like something that could be used to build
a Forrst client.


graphics css3 maps webgl security

Leaflet, Augment.js, Anatomy of a Mashup, 3 Dreams of Black, WebGL Security

Posted on .


Leaflet (GitHub: CloudMade / Leaflet, License: BSD) from
CloudMade and maintained by Vladimir Agafonkin is a JavaScript library
for building tile-based maps that work with desktop and mobile browsers.

It's extremely easy to use, and includes most of the user interface
elements required to work with maps:

// initialize the map on the "map" div with a given center and zoom 
var map = new L.Map('map', {
    center: new L.LatLng(51.505, -0.09), 
    zoom: 13

// create a CloudMade tile layer
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});

// add the CloudMade layer to the map

CloudMade are pushing OpenStreetMap as
their data source:

CloudMade are here to make using OpenStreetMap data easier and more accessible. We support OpenStreetMap by sponsoring mapping parties, providing public relations and legal support, hosting developer events and contributing to the OSM code base.


Augment.js (GitHub: olivernn / augment.js, License: MIT) by olivernn brings features from JavaScript 1.8.5 to other browsers. It
does this by patching missing functionality but leaving native methods

If you've ever got annoyed at the lack of
Array.prototype.indexOf or
Array.prototype.reduce in IE then this is the library for

Anatomy of a Mashup

Anatomy of a Mashup by Cameron Adams breaks down a six minute mix of Daft Punk

using a novel HTML5/CSS3 interface.

Cameron has written a post about it, Anatomy of a Mashup: Definitive
Daft Punk
which he says:

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.

I definitely enjoyed staring at the pretty shapes...

3 Dreams of Black

3 Dreams of Black is a WebGL music video, developed by developers at

"3 Dreams of Black" is our newest music experience for the web browser, written and directed by Chris Milk and developed with a few folks here at Google

The mouse can be used to explore the scenes, and there's even a hidden
Mega Man and Reddit alien. Once the video has played out it's possible
to explore the last scene, flying behind
some birds in a manner reminiscent of

This video also includes heavy use of shaders -- it works well as a
WebGL showcase. I'm actually quite jealous of whoever got to work on

WebGL as a Security Problem

In WebGL - A New Dimension for Browser
Forshaw explores security issues relating to WebGL, including denial of
service and cross-domain image theft.

While there is certainly a demand for high-performance 3D content to be made available over the web, the way in which WebGL has been specified insufficiently takes into account the infrastructure required to support it securely.

It's interesting that there's already a history of low-level problems
with WebGL:

During the development of WebGL it seems that all the browser vendors supporting it have encountered issues with certain drivers being unstable or crashing completely.

This research got a lot of attention this week, so at least it will get
more eyeballs on WebGL security issues. If ever there's been a way to
break out of a sandbox and exploit a machine, I'd imagine the low-level
access WebGL potentially provides is a rich target.