Modular JavaScript Library
Cross Browser BOM Library
One complication with JavaScript that we unfortunately have to deal with is the way that different browsers provide information about the browser itself in different ways. One way to overcome such issues is to use an existing JavaScript library that takes care of these complications for you. Including a large library just to use one small piece of it isn't very efficient though.
The script offered here is a much smaller alternative for those who want to simplify their access to information about the browser viewport size, the current scroll positiion of the page, and the location of the mouse at the time of the last mouse triggered event. This script creates a JavaScript object called $B which contains properties and methods that will retrieve the information from where ever the current browser stores it so that you don't need to write your own code to search for it. For example there are three different places where browsers might store the viewport width (the viewport is the space in the browser where the web page is displayed). With this JavaScript included in your code you can just reference $B.width to get the viewport width without needing to worry about which of the three places that the browser being used keeps that information. Similarly you just reference $B.mouseY() to get the vertical position of the mouse withiin the web page the last time it triggered an event.
Here's a list of all the properties and methods that the $B object provides for you:
Properties
- sWidth - the width of the screen in pixels
- sHeight - the height of the screen in pixels
- width - the width of the browser viewport in pixels
- height - the heignt of the browser viewport in pixels
- left - the current horizontal scroll distance in pixels
- top - the current vertical scroll distance in pixels
Methods
- mouseX() - the horizontal position of the mouse from the left of the page in pixels at the time the last event was triggered
- mouseY() - the vertical position of the mouse from the top of the page in pixels at the time the last event was triggered
To get a copy of this object to use in your scripts simply copy the following JavaScript and insert it in your page were needed. The above properties and methods will then be available for you to use in your code.
More Modules
Introduction Cross Browser DOM Element Cross Browser Event Ajax
