- A Tabbed Interface
- Project 12: Transitional CSS and Javascript Strategies
- Creating the Base Graphics for the Tabs and Assembling the Tab Table
- Planning the Project and Dividing It into Logical Modules
- Creating the XHTML Base
- Creating the Main CSS Stylesheet (common.css)
- Creating the Supplemental CSS Style Rules (advanced.css)
- Creating the Basic Document Object Creation Script (docobj.js)
- Creating the Tab Navigation Script (tabs.js)
- Modifying the XHTML Markup to Call the Functions
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating the Basic Document Object Creation Script (docobj.js)
In this section we'll create a document object construction script, which is a slight variation on the one we have used in the previous JavaScript projects. This script is more modular given that the document object constructor is defined as two functions. These functions can then be called by subsequent functions to create the necessary document object strings.
Open the file, docobj.js.
Create the function, getDocObj(). This function returns the text string that points out the correct document object of an element, depending on which browser is in use. Two arguments can be passed to the function: elem, or the id of the element in question, and parent, the id of the parent element if the element is nested.
If the browser in use is Netscape 4.x and it recognizes the document.layers property, the script then looks to see if the argument, parent, is specified. If it is, then the string of "document."+parent+".document."+elem is returned. If parent is not specified, then the string of "document." + elem is returned.
Otherwise, if the browser in use is Internet Explorer 4.x and up and it recognizes the document.all method, the string of "document.all." + elem is returned.
Otherwise, if the browser in use is W3C-DOM compliant (and is not Internet Explorer), the string of "document.getElementById('"+elem+"')" is returned.
function getDocObj(elem,parent) { if (document.layers) { if (parent) { return "document."+parent+".document."+elem; } else { return "document."+elem; } } else if (document.all) { return "document.all."+ elem; } else if (document.getElementById) { return "document.getElementById('"+elem+"')"; } }Create the function, getStyleObj(). This function returns the string that points to the style property of an element, depending on which browser is in use. This function is the same as getDocObj() except that it adds the ".style" string to the base document object string—in the case of Internet Explorer 4.x and up and W3C-DOM-compliant browsers. Note that the string for Netscape 4.x is identical in both functions.
function getStyleObj(elem,parent) { if (document.layers) { if (parent) { return "document."+parent+".document."+elem; } else { return "document."+elem + ".style"; } } else if (document.all) { return "document.all."+elem + ".style"; } else if (document.getElementById) { return "document.getElementById('"+elem+"').style"; } }
The Cross-Browser Document Object Constructor Revisited
To use the getDocObj() and getStyleObj() functions in other functions, use the eval() method to evaluate the results. This will obtain the actual document object. For example:
eval(getDocObj(elementid));
will return the document object of the element with the id specified, while
getDocObj(elementid);
will only return the text string.
The advantage of putting the document object constructors into functions is that it modularizes your code and reduces the typing you have to do when defining other functions. Experienced programmers in any object-oriented language like to create a library of custom reusable objects and functions like this.
Let's take an example from the previous project—the placeIt() function.
This is the old code. We've used this method so far so that you can see exactly how a custom document object is assembled:
function placeIt(elem,leftPos,topPos) {
docObj = eval(doc + elem + sty);
if (n4 || n6) {
docObj.left = leftPos;
docObj.top= topPos;
} else if (ie) {
docObj.pixelLeft = leftPos;
docObj.pixelTop = topPos;
}
}
Now this is the new code that uses the getStyleObj() function (the changed code is highlighted):
function placeIt(elem,leftPos,topPos) {
docObj = eval(getStyleObj(elem));
if (n4 || n6) {
docObj.left = leftPos;
docObj.top= topPos;
} else if (ie) {
docObj.pixelLeft = leftPos;
docObj.pixelTop = topPos;
}
}
As your understanding of JavaScript increases, try to build up your own library of reusable objects and functions too.
The document object text string for Netscape 4.x is not really needed for this project because none of the JavaScript functions that follow are intended to work in that browser. The getDocObj() function also is not used in the subsequent functions. However, I have presented the complete getDocObj() and getStyleObj() functions here because they are very useful when you have to create cross-browser scripts.