Recently, I had to write some javascript for field validation of a form. I wanted to be able to create a div element to cover the entire page, then display a modal window above that describing the user’s error. This required me to know the existing dimensions of the user’s browser window.
That’s not handled the same from browser to browser. The most notable difficulty is handling users with Internet Explorer (very common problem). I wrote all of the field validation and message creating myself, and I relied on a piece of code from David Flanagan’s Javascript 5 for determining window sizes.
Everything was working fine, until someone used IE6 to test. Of course, my code failed. I went through everything, looking for the culprit behind my disdain. Eventually, Derek got involved and we started checking the code out line by line.
It turns out, the error wasn’t mine. The error belongs to David Flanagan, a well respected and published software author! The root of all evil lied in his code for determining the coordinates of the browser on the users screen.
Examine the code below:
var Geometry = {};
if (window.screenLeft) { // IE and others
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
}
else if (window.screenX) { // Firefox and others
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
What happens when the window position (top or left) is zero? Think about that for a minute before you answer. In Javascript, the number 0 has more than one meaning, doesn’t it?
Then..
function() { return window.screenLeft; };
function() { return 0; };
which is equal to...
function(){ false;}
So when I was trying to access Geometry.getWindowX(), I get “Geometry.getWindowX is not a function”.
Here come the naysayers with their proof positive of why a loosely typed language is a bad idea. I hear what you guys are saying, and I still think you’re wrong. There’s a fix to this:
if (typeof(window.screenLeft) == 'number') { // IE and others
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
}
Notice how I merely prefix the javascript function ‘typeof’ to my if statement? That function returns a string describing the type of argument passed to it. Just by adding that function, my code was working. It sort of ‘hints’ to javascript what type to expect from the window and document objects. It’s not typecasting, but it’s just enough to make sure that Javascript is interpreting the number 0 as a number and not a boolean false.
For you developers out there, it’s worth your while to look around and see where you’re creating eventhandlers or callbacks where your return type might not be what you want it to be.
I checked David Flanagan’s site for any listing of errata, and came up with nothing. I know this is wrong, since I’ve seen a listing of known errors before. I didn’t see a way to contact him regarding the error, so I can only assume he’s aware of it, and doesn’t care about nit-pickers like me.
That’s fine with me.
