|
Creating a Cross Browser DOM In the last lesson we found out that we can detect the browser and version, so now we can use JavaScript to fix the DOM problem with CSS. Recall that the Document Object Model for MSIE and Netscape are different (see lesson 8 and lesson 9. If we want to make a page with Style sheets and use JavaScript to access and manipulate the properties, we would basically have to write two different scripts... one for Netscape and one for Internet explorer. What we can do instead is write a script that will allow us to write using the Internet Explorer Document Object Model with Netscape (there are technical reasons we can't use the Netscape DOM with Internet Explorer.). In the next example, we'll make an Javascript object whenever we encounter Netscape that will convert document.layers["name"] to document.all["name"].style for us. Let's see how we can fix our DOM, and adjust our code. Save the following Code as dom.js: Type the follow code into CodeRunner below:
Remember to save this file as dom.js No Need to Preview this code. It won't do anything. Let's hold off on understanding how this code works and instead let's use it (the description of the code is at the end of this lesson). We will use it as a ".js" file as the src of the script. Recall that we use ".js" files to easily reuse code so we don't have to rewrite it all the time. Now erase all of the code currently in CodeRunner, and add the following code as an example of using dom.js Type the follow code into CodeRunner below:
Now PREVIEW this. It doesn't seem like we've done much, but the object reference document.all['scotty'].style.top WILL WORK ON BOTH INTERNET EXPLORER AND NETSCAPE! From now on, when we use CSS, we need only use the the Internet Explorer DOM and it will work on both browsers as long as we include the dom.js file with our web pages. Be sure that when you use dom.js that you include onload=setTimeout('init()',200); in the body tag of your document. In this case as init is short for initialize. The reason for the setTimeout is because Internet Explorer doesn't wait for the dom.js file to load when it calls the onload event. Now when we write javascript for stylesheets we can use the syntax for Internet Explorer and both Netscape and Internet Explorer will understand it. Neat eh?
The First part, the blue part is a short hand way of checking the browser type. Let's take a slight diversion here and discuss how this works. Setting nav = document.layers and IE4 = document.all is checking to see if these object arrays exist. They will return true or false. The next two lines we use some syntax we haven't discussed before. We use shorthand notation for an if - else statement. Here is how it works: The statement: is equivalent to the following: Think of the ? as a then and the : as an else when you read these lines. So the outcome is that if nav is true then isNav4 is set to true otherwise it's set to false. The testing of true or false is done entirely in (nav). Here is another example to think about. The red part is the new code for this lesson. IF isNav4 is true then we use the code in red. In this code we are making a javascript object that has a style property given by this.style, which is equal to document.layers[ID]. Then with a for loop we create an array called document.all[id]. The id is given by the names of the stylesheets that are held in Netscape's layers array. So this way we can use the array document.all instead of layers. Now since each entry in the document.all array is an object with a style property, we can ask for document.all[id].style which for netscape is exactly equivolent to calling document.layers[ID]. Later we will add more properties and methods to our new object to make functions we can call and both browsers will respond. For instance, Netscape has a method called MoveTo(x,y) but internet explorer does not.We'll make sure they both have such a function through our dom.js file. This is enough for now. We will have plenty of oppurtunities to use these methods in later DHTML lessons...See you there! |