1. Home
  2. Computing & Technology
  3. Web Design / HTML

Cross Browser DHTML

Develop Branching Content Within Pages

By Jennifer Kyrnin, About.com

Using JavaScript you can create content that is different for different browsers right within the text of the page. This is especially useful if you use a lot of Cascading Style Sheets within your Dynamic HTML. You can use the document.write command to write different lines of HTML depending upon the browser.

The best way to do this is to create two (or more) variables that represent the different browsers you want to support. Then, in your HTML you write different HTML depending upon which variable is set.

<script language=javascript>
<!--
var isNS, isIE;
if (parseInt(navigator.appVersion) >= 4)
{isNS = (navigator.appName == "Netscape");
isIE = (navigator.appName.indexOf ("Microsoft") != -1)}
-->
</script>

You call it within your HTML by writing another script:
<script language=javascript>
<!--
if (isNS)
{document.write ("Netscape 4.0 information");} else if (isIE) {document.write ("Internet Explorer 4.0+ information");}
-->
</script>

The advantage to this method is that it allows you to work more freely within your pages while not having multiple pages to maintain. However, it can make your HTML very complicated and hard to follow. Make sure that you comment your code well for both other editors, and yourself in a few months.

Write Your Own Code Libraries

If you are feeling ambitious or need to have a lot of dynamic HTML on your pages that is cross-browser compliant, then you would do well to create modular libraries that you can load into your pages quickly and easily. This library would include functions such as the isNS/isIE variables above, methods to handle cross-browser object reference, positioning, and more. Whatever you need to use on many of your pages.

As you create the functions, save them in a global JavaScript file (with the extension .js). In the head of your HTML pages you can load this file and use the functions over and over across your site. If you don't want to write your own functions, Webmonkey has a great Dynamic HTML code library that you use to build up your own library.

Developers who have a large number of Web pages to add in Dynamic HTML will find this technique invaluable. It is especially useful if you are working with a large team of developers, you can give them an absolute path to the library so they can load it into their pages without hassle.

Previous Features

Explore Web Design / HTML

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Web Design Articles A-H
  6. Web Design/HTML Articles C
  7. Cross Browser DHTML

©2008 About.com, a part of The New York Times Company.

All rights reserved.