Scripting for 5th Generation Browsers and Beyond - Part II - (1/4)

[next]

Scripting for 5th Generation Browsers and Beyond

Thus far we have focused upon standalone examples to highlight a few of the things that can be achieved by using standards based coding. While useful to illustrate some of the potential of the new generation browsers, in practical Web page building terms there are even more useful techniques that can be applied.

As a way of introduction to more comprehensive articles focused on DOM based Web page building, let us take a look at a few of the common techniques and routines I often use when building Dynamic HTML Web pages.

These techniques include the following:

1. Object Oriented Browser Sniffer
2. Object Constructors
3. Positioning Layers By Browser Dimensions

Let's Get Going!

In a previous article I demonstrated how to dynamically resize images. In keeping with the notion of creating liquid Web pages that dynamically accommodate different browser dimensions, let us utilize this opportunity to build on that previous article and demonstrate how to position layers by browser dimensions from a DOM based coding perspective. Specifically, let us learn how to dynamically center a layer across varying browser sizes.

First off our browser sniffer script:

function Is() {
    agent  = navigator.userAgent.toLowerCase();
    this.major = parseInt(navigator.appVersion);
    this.minor = parseFloat(navigator.appVersion);
    this.ns    = ((agent.indexOf('mozilla')   !=   -1) && 
                 ((agent.indexOf('spoofer')   ==   -1) && 
                 (agent.indexOf('compatible') ==   -1)));
    this.ns4   = (this.ns && (this.major      ==    4));
    this.ns6   = (this.ns && (this.major      >=    5));
    this.ie    = (agent.indexOf("msie")       !=   -1);
    this.ie3   = (this.ie && (this.major      < 4));
    this.ie4   = (this.ie && (this.major      ==    4) && 
                 (agent.indexOf("msie 5.0")   ==   -1));
    this.ie5   = (this.ie && (this.major      ==    4) && 
                 (agent.indexOf("msie 5.0")   !=   -1));
    this.ie55  = (this.ie && (this.major      ==    4) && 
                 (agent.indexOf("msie 5.5")   !=   -1));
    this.ie6   = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
}
var is = new Is();

The purpose of this script is to be able to detect which browser the client is using. In reality, we could use direct object detection here, instead of browser detection, but in many instances object detection is not strict enough - particularly if we want to build a complex backward compatible Web page or at a minimum redirect users to an alternate page or pass an alert.

The browser sniffer is composed of JavaScript statements that convert the user agent string into an object to use later in the script as a variable by using the var is = new Is(); statement. As long as the variable is associated with the correct user agent string, we should not run into many problems.

From the browser sniffer script we need to use the 6 variables that cover the major DHTML capable browsers: is.ns4, is.ns6, is.ie4, is.ie5, is.ie55 and is.ie6. The easiest way to understand these variables is to think of them as taking the form of a question posed to the browser.

if (is.ie5|| is.ie55|| is.ie6|| is.ns6){
do the script here

Asks the question is this either Internet Explorer 5 and above or alternatively Netscape 6. If the answer to the question is yes, then run this portion of the script. Since this condition forms the basis of coding for the W3C DOM, wherever possible it takes priority in the conditional logic. If the answer is no, then go to the next question and see if the answer is yes.

} else if(is.ie4) {
do the script here

Asks the question is this Internet Explorer 4. As before, if the answer to the question is yes then run this portion of the script, if the answer is no then go to the next question.

} else if(is.ns4) {
do the script here

We could also build in other variables, which detect for Opera, WebTV and so on and could either redirect users to an alternate page or pass an alert.

Contents:

• Let's Get Going!
• Object Constructors
• Capturing Browser Dimensions
• Understanding Positioning

[next]