DHTML Lesson 4 - Cross Browser DHTML
Now that you have the basics down for creating DHTML in both Netscape 4.0 and Internet Explorer 4.0, you are ready to move to creating cross browser compatible DHTML. If you have been creating duplicate pages so that you can use DHTML and still have all of your visitors view it, this should come as quite a relief.
The reason that there is incompatibility between browsers lies with the DOM or Document Object Manager. Netscape and Internet Explorer use two different DOM’s, which is the heart of the problem. Common solutions include making two different pages, as we mentioned earlier, or using a forking technique which will allow you to combine the two documents into one, which is essentially messy and time consuming.
To avoid this, you need to create a hybrid code, or a code that both browsers will recognize. As you know, Netscape uses the < layer > tag to recognize DHTML, and Internet Explorer uses either < div > or < span >. So, how can you combine the two to save time and write code once instead of multiple times?
Here is an example of how you can merge your code together to create a hybrid that will be recognized by both browsers:

You can see the use of conditional statements that will be read by both browsers and then executed in accordance with the browser that your visitor is using. While it is still not as simple as it could be, until both browsers come to terms and use a similar DOM, this is as simple as it is going to get.
The top half of this script contains the tags that Internet Explorer will recognize, such as bgcolor=â€style.backgroundColor†and tags that Netscape will recognize, such as bgcolor =.bgcolorâ€.
This will enable you to create your DHTML code throughout the rest of the document without worrying about creating separate codes for each and every DHTML action. Just use the above code at the top of your page and the rest of your time can be spent concentrating on your code instead of worrying about cross platform issues. You are basically defining the syntax that will be used throughout the rest of the page.
Now that the mechanics are out of the way, we can start having some fun and see what DHTML can do to liven up your website! Our next tutorial will cover how to add scrolling text bars to your page using DHTML.
Related Posts:Posted on 12/27/05 1:35 AM
Be the first to comment!