CodeSOD: Ordering Off This Menu

While browsing one day, Emma clicked a link on a site and nothing happened. That was annoying, but Emma wasn't about to give up. She tried to get the URL out of the link, only to discover that there wasn't a URL. Or a link. A quick trip to the DOM inspector highlighted what was going on:

<div id="I32" align="left" onclick="ItemClick(3,2)" onmouseout="RollOut(3,2,false)" onmouseover="RollOver(3,2,false)" style="position: absolute; top: 43px; left: 1px; width: 176px; height: 16px; font: bold 8pt Arial; color: rgb(1, 35, 69); background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 2px; cursor: pointer; border: 0px solid rgb(255, 255, 255);">Project Office</div>

This is an anti-pattern I thought had died circa 2006. Don't reinvent hyperlinks in JavaScript. Here, we have a div with an onclick that triggers navigation- assuming the code works, which it didn't in this case. But this isn't the WTF, it's just the appetizer.

Emma wasn't about to let this go. She dug into the JavaScript to try and figure out what ItemClick did so she could get the link to the article she wanted. Instead of the menu being driven by server side code, or JSON, or just plain HTML, they were driven by one JavaScript array:

[false,0,0,180,20,"#012345","#FFffff","#ffffff","#012345","#4573b3",5, 'News', 'http://w3.initech.org/html/mod_actu/public/actu_welcome_en.php3', false, 'Project overview','http://www.initech.org/3-project-overview.html',false, 'Project Office','http://www.initech.org/ProjectOffice/Project-office.html',false, 'Documents','http://www.initech.org/Documentation/3-documents.html',false, 'Partners','http://www.initech.org/ProjectOverview/participants.html',false]; 

I can feel my pulse rising just looking at this. Good luck figuring out what these all do if you had to maintain this code. Clearly the preamble contains some location information (0,0,180,20), some styling information (the colors), and a count of links (the 5). The links are easy-ish to follow: caption, URL, and a boolean (whether it opens in a new window or not?). What's that leading false at the start of the array though? No idea. Maybe whether the menu defaults to expanded?

Regardless, I hate it and it just makes me feel stressed.

While Emma was able to get the links she was looking for, it didn't help her at all, as those URLs were all deceased anyway.

Given the overcomplicated nature of the menu system, and the fact that this website was a French language site, Emma had this to add: " I guess the French don't know about KISS."

[Advertisement] Continuously monitor your servers for configuration changes, and report when there's configuration drift. Get started with Otter today!