DailyJS

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

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

jquery canvas plugins truncation

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

Posted by Alex R. Young on .
Featured

jquery canvas plugins truncation

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

Posted by Alex R. Young on .
Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/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!