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

by

at 2011-10-11 07:00:00

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

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

Notificon

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");
  removeNotificon();
  document.getElementsByTagName('head')[0].appendChild(link);
};

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

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 call:

$('#sticky-list').stickySectionHeaders({
  stickyClass     : 'sticky',
  headlineSelector: 'strong'
});

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

jQuery.suggest

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?

smartTruncation

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!

Google Reader