Demo site uses different approaches to display some artwork by WaxDoctor.

Peter Patrick Bloch, Austin, Texas, USA
a/k/a
“WaxDoctor”
June 29, 1955 — July 31, 2004

HomePage. . . | . . . RegularSlideShow . . . | . . . IncrementalPre-Load . . . | . . . DynamicDriveScroll. . . | . . . FrameSet. . . | . . .DirectorMovie

 

 

 

 

 

This version has onMouseOver="slidespeed=0" onMouseOut="slidespeed=copyspeed" to pause and then resume scroll, but cannot get auto scroll (marquee) to work in Netscape Navigator! Therefore we left the old “regular” Slide Show below. See DyanicDrive version for better and more-up-to-date results.

The 3rd edition of JavaScript Unleashed (Chap 21) noted that <Form> TEXT object was used for “scrolling marquees.” Embedding <layer> inside <iLayer> was an alternative to <Form>.

Netscape Navigator 4 included <layer> and <iLayer> tags, but did not support <DIV>, <Marquee> or <iFrame> tags. NN method to access via LAYERS array eval= document.layers ['layer1'].visibility = 'hidden'; Internet Explorer via ALL array eval= document.all ['layer1'].visibility = 'hidden'; in <DIV> tag, use ID attribute for IE; use NAME for NN e.g., <DIV name ="layer1" id ="layer1">.

JS Unleashed 3rd edition had the following code:

<html> <head>  <title>JavaScript Unleashed</title>

  <style type="text/css"> <!--

    #layer1{

    background-color: green; height: 100; left: 10; position: absolute; top: 50; width: 100;

    }

  -->  </style>

  <script type="text/javascript" language="JavaScript1.2">  <!--

    // Create global variables for browser type

    var layer = new String();

    var style = new String();

    // Determine if the browser is Internet Explorer, Navigator, or other. Also, set the layer variable depending on the type of access it needs.

    function checkBrowser(){

      if(navigator.userAgent.indexOf("MSIE") != -1){

        layer = ".all";

        style = ".style";

      } else if(navigator.userAgent.indexOf("Nav") != -1){

        layer = ".layers";

        style = "";

      }

    }

    // Take the state passed in, and change it.

    function changeState(layerRef, state){

      eval("document" + layer + "['" + layerRef + "']" + style +  ".visibility = '" + state + "'");

    }

  //-->  </script> </head>

<body onload="checkBrowser()">

  <div name="layer1" id="layer1">

    DIV 1

  </div>

  <form name="form1">

    <input type="button" value="Hide"

      onclick="changeState('layer1','hidden')">

    <input type="button" value="Show"

      onclick="changeState('layer1','visible')">

  </form>

</body> </html>

Now, NN6+ no longer supports <iLayer> or even <Layer> and still has bugs with <DIV>. What to do?

DevX's dhtmlZone had a good article “Two Roads Converging” that pointed out “The Bad News” about N6 not being backward compatible with layers and offered the following code as a solution:

<html> <head>
<title>IE5 and N6 DHTML</title>
<script language="JavaScript">
function begin(){
if(document.getElementById && !document.all)
aWidth = innerWidth;
if(document.all)
aWidth = document.body.clientWidth;
pos = parseInt(document.getElementById('main').style.width);
document.getElementById('main').style.left =
parseInt((aWidth - pos)/2);
}
</script>
</head>
<body onLoad="begin()" onResize="history.go(0)">
<div id="main" style="position: absolute;
top: 10; left: 10; visibility: visible;">
<img border="0" src="ventures.jpg">
</div>
</body> </html>

JavaScript Unleashed's section on “billboards” noted four steps: (1) Create image placeholder on Web page. (2) Define array to hold images (example used primary and transitional image arrays). (3) Develop JavaScript routine to manage image presentation. (4) Associate JavaScript function as an event handler of Window's onLoad event.

Helpful “billboard” JavaScript examples were found at http://www.ipac.caltech.edu/2mass, http://www.webreference.com/javascript, and ...

 

Ahem, excuse us! If you can see this message, your browser is not CSS2 complaint. This site employs Cascading Style Sheets and JavaScript so it looks better in browsers that support Web standards.


Regular
SlideShow		 Auto Rotate
Billboard		 Incremental
Pre-Load		 DynamicDrive
Scroll		 FrameSet Director
Movie

Go to Top of Page . . . . . . OR . . . . . . Go to Home Page

<< Back                       Next >>
Top of Page . . . . . . OR . . . . . . Home Page