DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 17 | WebReference

DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 17

Logo

Dynamic Headline Fader, Version 3.0
Loading the external scripts for NS4.01


The Problem

The three earliest versions of Navigator have a problem dynamically loading external scripts. Read all about it in Hierarchical Menus, Version 3.08a.

Here is a reworded-for-the-fader version of that page:

Old versions of Navigator for Windows (fine on the Mac) seem to try and load external scripts but hang. The scripts themselves are not the problem. It is our conditional-loading script that confuses them:

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='news.js' TYPE='text/javascript'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='fader.js' TYPE='text/javascript'><\/SCRIPT>");
}
//-->
</SCRIPT>

In all other versions, and in IE, the second document.write is executed after the SCRIPT in the first document.write has loaded. This is the expected behavior, and vital to our technique.

The old Navigator versions execute the second document.write immediately after the first document.write, while the first SCRIPT is still loading.

The Solution

Obviously the best way to load the two external scripts is without document.write:

<SCRIPT LANGUAGE="JavaScript1.2" SRC="news.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="fader.js" TYPE="text/javascript"></SCRIPT>

Unfortunately, we can only use the above method in controlled environments. Remember, due to a problem with Navigator 3...

All external script files not meant for Navigator 3, but included in a Web page accessible by Navigator 3, should be loaded indirectly.

We've discussed the Navigator 3 problem and our document.write solution in DHTML Diner.

We must therefore load the two external files indirectly, with document.write, but avoid the load overlap. This is achieved by loading one file at a time in this way:

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='news.js' TYPE='text/javascript'><\/SCRIPT>");
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='fader.js' TYPE='text/javascript'><\/SCRIPT>");
//-->
</SCRIPT>

The syntax is certainly not elegant, but it is compatible with all DHTML and non-DHTML browsers.

Finally, just as we did with the HierMenus, let's make the Fader in-page script compatible with Active Server Pages.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999

URL: http://www.webreference.com/dhtml/column27/fade3ns401script.html