Random sized links

| Javascript | 2 Comments

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:

2 Comments

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.

Random entries

Here are some random entries that you might be interested in:

Recent Assets

  • 2023-09-24-jong-tegen-oud-1.jpg
  • 2023-09-24-jong-tegen-oud-2.jpg
  • just-call-me-fred.png
  • foggy-morning.png
  • oma-2023-07-27.jpg
  • i-almost-died.png
  • chipping-from-twenty-meters.png
  • de-koepel.png
  • screenshot-www.udemy.com-2023.05.18-10_02_39.png
  • screenshot-www.golf.nl-2023.05.08-09_57_30.png
  • IMG-20230423-WA0000.jpg
  • me-and-my-radio-paradise-hat.png

Recent Comments

Golf Handicap

Information

This personal weblog was started way back on July 21, 2001 which means that it is 7-21-2001 old.

So far this blog contains no less than 2498 entries and as many as 1877 comments.

Important events

Graduated from Stanford 6-5-1979 ago.

Kiffin Rockwell was shot down and killed 9-23-1916 ago.

Believe it or not but I am 10-11-1957 young.

First met Thea in Balestrand, Norway 6-14-1980 ago.

Began well-balanced and healthy life style 1-8-2013 ago.

My father passed away 10-20-2000 ago.

My mother passed away 3-27-2018 ago.

Started Gishtech 04-25-2016 ago.