jQuery Tag Cloud

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. The tagcloud should work for machine with and without javascript.

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 %>


jQuery

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:


nanoc

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.

Of course to be nice you need the associated CSS

That’s all folks.

Comments

comments powered by Disqus