jQuery Roundup: Notificon, stickySectionHeaders, jQuery.suggest, smartTruncation

2011-10-11 00:00:00 +0100 by Alex R. Young
Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).


Notificon (GitHub: makeable / Notificon, License: BSD) by
Matt Williams dynamically changes a site's favicon to include a
notification value. This works by generating link elements
with data URIs using a canvas:

var changeFavicon = function changeFavicon(canvas) {
  var link = document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'icon notificon';
  link.href = canvas.toDataURL("image/png");

It's a cool hack, and it made me wonder about Internet Explorer support.
IE8 apparently supports link elements with base64 encoded
data, so perhaps something like
ExplorerCanvas could be used to get broader browser support?


stickySectionHeaders (GitHub: polarblau / stickySectionHeaders,
License: GPL and MIT) by Polarblau is a jQuery plugin that can help
create iOS-style sticky headers in a list. All that's needed is a simple

  stickyClass     : 'sticky',
  headlineSelector: 'strong'

The author has provided some iOS-style CSS as well.


jQuery.suggest (GitHub: polarblau / suggest, License: GPL and MIT) also by Polarblau is an autocomplete plugin that works a little bit like native elements, with greyed out text.

While it's true there's a lot of autocomplete plugins out there, how
many of them are written this cleanly and come with tests?


Finally, smartTruncation
(GitHub: polarblau / smarttruncation, License:
GPL and MIT) is another plugin by Polarblau. This one truncates text within its parent element. It can also truncate from the centre: "Hello
World" becomes "Hel...rld".

Text truncation in client-side code is a source of fascination for me
because I've attempted it a few times without a huge amount of success.
Polarblau's algorithm creates a cache of font size values and then adds
characters to an element until it has filled the desired size. It also
takes file name extensions into account.

It's pretty easy to use:

$('.files li').smartTruncation({
  'protectExtensions' : true // "myimagefile.jpg" -> "myimagef...jpg"

It's worth noting that each of these plugins by Polarblau is clearly
licensed, includes tests, and has its own project web site (hosted by
GitHub). This is how you distribute plugins!