Boris Yakobowski

research and other interests
Me

Entries

1 Oct 2007

Updated Nice titles

Created: 10 Mar 2007

Back in 2003, Stuart Langridge popularized what became known as “Nice Titles”. In essence they consist in a bit of javascript code that displays fancy hovering boxes on top of links, as can be seen here.

Nice titles have became hugely popular, and many people proposed variants. I will mention those of Dunstan Orchard and Mark Wubben. This entry presents yet another implementation, with some features found only in some of the above versions, and some entirely new. I've also corrected what I believed to be bugs.

What's in this version?

  • The nicetitles follow the mouse.
  • The size of the nicetitles is not fixed. This avoids some overflow problems when their content is too big.
  • The nicetitles do not go outside of the window, and they try moderately hard not to appear on top of the mouse cursor.
  • The nicetitles appear after a little delay (and e.g. ‘sup’ tags inside the text of the anchors do not cause delays).
  • Nicetitles can be used to display image thumbnails. Currently, ‘img’ tags with the ‘thumb’ class automatically receive thumbnails; see the photographs on the right.
  • The code is modular and hides the functions that should not be redefined by other javascript modules.
  • The code is thoroughly tested under various versions of Gecko, Internet Explorer (versions 6 and 7), Opera (versions 8 and 9), Konqueror and Safari 3 (for Windows).

The source code is available, as a plain .js file or pretty-printed. You also need to add inside the file an implementation of the addEvent function that correctly handles the scopes for the ‘this’ keyword. I currently use Justin Diaz's version.

Finally, the css stylesheet I use on this site can be used as an example to format the nicetitles boxes.


I am interested to hear about any problem encountered while using this code. My mail can be found on this page, should you wish to contact me.

Updates:

  • 2007-10: fixed a bug in Safari

Random photographs

ThumbnailThumbnailThumbnailThumbnailThumbnailThumbnail