Browser Object Model Functions
How they Work
Join the Discussion
BOM Scripts
One reader sent me an email about one of the Browser Object Model scripts that I have on this site claiming that it was poorly coded and included code that was not needed. As all their web pages were obviously using a strict DOCTYPE that statement was correct in so far as using the script on their site is concerned. Not everyone is using a strict DOCTYPE for their web pages though and so I have coded by BOM scripts so that they will work on all browsers without the person using them needing to know how they work.
The following discussion can be applied to any of my Browser Object Model scripts but let's just choose one for the purpose of this discussion.
return typeof window.pageYOffset != 'undefined' ?
window.pageYOffset :
document.documentElement &&
document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop;}
This code is as short and efficient as I can make it so that the function will return the current distance that the page has been scrolled down within the browser window regardless of what browser your visitors are using and regardless of how you have coded your web pages. Only if the browser doesn't supply the information in any way at all does 0 get returned (unless the page has not been scrolled down at all).
If all you atre interested in is having the code work on your page then all you need to do is to use the scripts exactly as I have written them. If you want to understand further howq they actually work and the reason why they are coded as they are then keep reading as I am about to explain to you exactly how the above script works and the reason for all the code. By comparing this script with my other BOM scripts you xshould be able to work out the reason why they are coded as they are as well.
Firstly, the script uses the ? : ternary operator twice. This is basically a shortcut way of coding an if statement. The following two statements are equivalent.
b = a?c:d;
As you can see, the second version is harder to read but slightly shorter to code. Depending on how complicated each of a, c, and d become the second way of writing this statement can become a lot shorter than the first way and hence using it for a whole series of BOM functions can make for slightly faster loading web pages.
Now that you know what that notation means you can see that the script basically consists of two nested if statements. Let's next look at what they are testing and why we need those tests.
The first if statement can be rewritten into a longer form as:
return window.pageYOffset;
else ....
The browser object model does not have any standards that it is required to follow the way that ECMAscript and the DOM (the other two parts of javascript) do. Most browsers though have chosen to provide window.pageYOffset as the way of retrieving the distance that the current web page has been scrolled down in the browser. This if statement basically tests if the browser has defined this field (feature sensing) and if it has it returns the value from the function.
That actually takes care of most browsers with the exception of Internet Explorer which has its own way of doing things. (Note that there are occasions where there is more variation between browsers as to what field they use and in those instances you may find that my scripts have more nested if statements).
Internet Explorer not only provides the BOM information using different fields from other browsers but it also has two different BOM that it uses depending on the DOCTYPE that you use in your pages. If your page uses a strict DOCTYPE (either the HTML 4.01 or XHTML 1.0 version) then Internet Explorer loads the BOM values into properties of document.documentElement. If your page use a transitional DOCTYPE or no doctype at all then Internet Explorer doesn't create the document.documentElement properties and creates document.body properties instead. The second if statement basically tests whether a page uses a strict doctype or not and if it does and the page has been scrolled then it returns the appropriate scroll value. The long form of this if statement is:
return document.documentElement.scrollTop;
else return document.body.scrollTop;
The code is written like this because I don't know whether the people who are going to use this script are using a strict doctype or not. Many of the people likely to be using the script probably don't even know that themselves. If you don't know what doctype you are using or you have one or more pages that either doesn't have a doctype or which uses a transitional doctype then you should use the script exactly as I have coded it and then you can be sure that it will work regardless of what future changes you may make to your web pages (you will eventually want to change all your pages to use a strict doctype as eventually the transitional doctypes will no longer be supported). If on the other hand all of your web pages use a strict doctype and you know for certain that you will never want to use the script on a web page that doesn't use a strict doctype then you can simplify the code by doing away with the second if statement as you know that Internet Explorer will use document.documentElement for your web pages rather than document.body.
