jQuery Tag Cloud [en]

Here is how I done the tag cloud of my blog. It is done mostly in jQuery. All my site is static and pages are generated with nanoc. It is (in my humble opinion) the modern geek way to make a website.

This is why I’ll give only a Ruby Generator, not a full javascript generator. But you can easily translate from Ruby to Javascript.

Here is what you should obtain:

<%= tagCloud %>


Here is the simple jQuery code:

This code will hide all the div containing links to articles containing the tag. And create a function do show the div containing the tag.

For each tag I create a span element:

and a div containing links associtated to this tag:


Here is how I generate this using nanoc 2.

If you want to make it fully jQuery one, it shouldn’t be too difficult, to use my ruby code and translate it into javascript.

In a first time tags correpond of the list of all tags.

A function to create a data structure associating to each tag its occurence.

I also need a data structure who associate to each tag a list of pages (at least url and title).

Calculate the real size of each tag to be displayed.

I choosen not to use the full range of size for all the tag. Because if no tag has more than n (here 10) occurences, then it doesn’t deserve to be of the maximal size.

Finaly a function to generate the XHTML/jQuery code

You can download the complete file to put in your ‘lib’ directory. Beware, it is a nanoc 2 version, you’ll have to make some small changes like replace @pages by @items to be nanoc3 compatible.

Of course to be nice you need the associated CSS

That’s all folks.