So I decided to be clever again, but this time around in an unusual javascript kind of way.
Do you see all of those links down the left and right columns? Well, if you have javascript enabled in your browser, then you should see a bunch of messed-up looking links which are randomly sized, some bold, some italic and others just plain old normal.
For those lucky enough to be knowledgeable in the fine art of Dynamic HTML, I will reveal my secret.
Here it is:
<script type="text/javascript">
// Creates random fontsize, bold, italic or normal for links.
function resize_menu_links(class_name, h2_names, min, max) {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (typeof(divs[i].className) == 'string' && divs[i].className == class_name) {
var h2s = divs[i].getElementsByTagName('h2');
if (h2s && is_in_array(h2_names, h2s[0].innerHTML)) {
var a_links = divs[i].getElementsByTagName('a');
for (var j = 0; j < a_links.length; j++) {
var fs = min + Math.floor(Math.random()*(max-min+1));
a_links[j].style.fontSize = fs+'px';
var rx = Math.floor(Math.random()*4);
if (rx == 1) { // bold
a_links[j].style.fontWeight = 'bold';
} else if (rx == 2) { // italic
a_links[j].style.fontStyle = 'italic';
} else if (rx == 3) { // both
a_links[j].style.fontWeight = 'bold';
a_links[j].style.fontStyle = 'italic';
}
}
}
}
}
}
The function is_in_array checks to see if a given string matches one of the elements of the array, returning true or false.
function is_in_array(the_array, what) {
for (var i = 0; i < the_array.length; i++) {
if (the_array[i] == what) return true;
}
return false;
}
Finally, I use the standard setTimeout function to make sure that the changes are made once the page has been loaded, waiting 50 milliseconds before firing off the function resize_menu_links , passing the array of allowed section strings as well as the range of font sizes, in this example 9-17px.
// Only for titles given in 2nd array parameter.
setTimeout("resize_menu_links('menu_subsection', ['Categories', 'More links', 'Archives', 'More entries'], 9, 17)", 50);
</script>
Do you have javascript enabled?
The answer is:
Wouldn't it be more interesting to have the size/style of the links depend on the popularity of it? "Tag clouds"?
Yes, I could easily do that I guess. The only problem with that approach is this: the popular items will become more and more popular as they get larger and larger, while the poor less popular smaller links become more and more unpopular, e.g. smaller and smaller until they vanish completely into the nothingness of a single pixel. To be honest, I found this pinch of randomness more interesting (and fair), giving even the less potentially popular a chance to live on in infamy.