Today's Classic WTF was originally published on Wednesday, November 08, 2006. An interesting fact: this is actually the same Chris and the same Mentor from an earlier article, Mentors, the Freshmaker.  

Today's Code Snippet comes from Chris. Chris has had the distinct pleasure of being "mentored" by an amazing individual. Some time passed, then Chris bumped into The Mentor again. This time Chris had to rework a web site The Mentor had, dare I say, created? As Chris was going through the code for the page design, he noticed something curious about the footer. No matter where the page was scrolled to, the footer always showed up. "Very nice", he thought to himself, "I wonder where he got the script?" Turns out The Mentor had written it himself.

The layout for the site was made from a giant table with 1 row and 3 columns, navigation, content and a spacer column. The method he used to put the footer into place was interesting (putting it nicely). Instead of moving the footer itself and stretching the container with it (a widely documented process), The Mentor decided to resize the spacer image... one, pixel, at, a time.

window.onload = function() {
	var winHeight = getWindowHeight();
	var spacer = document.getElementById('spacer');
	spacer.style.marginTop = "0px";
	spacer.style.height = "15px";
	var i = 1;
	while (spacer.style.height != (winHeight-50)+"px") {
		spacer.style.height = i + "px";
		i++;
	}
};

The getWindowHeight was "borrowed" from another script web site, and does what you would expect. The funny thing is that this script works remarkable well. Loading the site on an old computer, however, has a rather odd effect of making the footer "fall" into place instead of just appearing there.

Chris replaced the function with a single line of code.

window.onload = document.getElementById('spacer').style.height = getWindowHeight()+"px";

The great thing about the single line approach is that it eliminates the need to loop hundreds of times, (one for each pixel in my view port).

Chris writes, "Just for fun I loaded on my mobile phone which has JavaScript and DOM support. It crashed. Probably more the fault of the browser's crummy JavaScript implementation, but all the same ..."

Moral of the story?

Just because a solution does what you want, doesn't mean it's a solution that does what you need

[Advertisement] BuildMaster allows you to create a self-service release management platform that allows different teams to manage their applications. Explore how!