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 ui plugins internationalization

jQuery Plugin Roundup 17

Posted on .

Welcome to the jQuery Plugin Roundup, episode 17. Remember you can send
your plugins in for review through our contact form or


Awesomecomplete by Clint Tseng
(demo) is an autocomplete plugin that attempts to address common problems with
similar plugins. The author says it's better because:

It's an autocomplete plugin that works against multiple fields, with a pretty powerful and flexible search algorithm ... JavaScript is a dynamically typed language that’s trivially easy to reflect against. Why should I care what you give me? Just give me a list of whatever JavaScript model objects you use.

Usage looks like this:

  noResultsMessage: 'No results found.',
  staticData: [ // whatever ],
  valueFunction: function(dataItem) {
      return dataItem['name'] + ' <' + dataItem['email'] + '>';

As you can see, the valueFunction does what the quote says.

I think the author's idea of making this more data-driven and reflective
does make it better than the other autocomplete plugins I've used.


password123 by Timmy Willison (MIT and GPL) helpers create an iPhone-like password field, with \$('input:password').password123();. It's simple, looks
nice, and might work for your next HTML5-rich-UI app.

If you're not familiar with the iPhone, the
demo explains the effect.

Coincidentally, when this plugin was sent to me the WebKit autofill data
vulnerability was announced. So I saw "Safari... password" in the email
and got worried. It turned out to be one of those strange coincidences!


jsperanto (MIT) by Jean-Philippe Joyal helps handle translation in JavaScript templates. It reminds me of
other internationalisation APIs, so you might be familiar with the API
already (he says it's like i18n in Rails):

  t('project.name'); //-> "jsperanto"
  $.t('project.store'); //-> "JSON"
  $.t('can_speak',{count:1}); //-> "I can only speak one language"
  // and so on

The author has checked the script with JSLint and written unit tests,
and carefully namespaced everything. It seems like a pretty solid