Layer object (Object/Navigator)

An object representing an HTML <LAYER> tag.

Availability:

JavaScript - 1.2
Netscape version - 4.0
Deprecated
JavaScript syntax:NmyLayer = myDocument.aLayerName
NmyLayer = myLayerArray[anIndex]
HTML syntax:<ILAYER>, <LAYER>
Argument list:anIndexAn index into the layer array
Object properties:above, background, below, bgColor, clip, document, hidden, left, name, pageX, pageY, parentLayer, siblingAbove, siblingBelow, src, top, visibility, window, x, y, zIndex
Object methods:load(), moveAbove(), moveBelow(), moveBy(), moveTo(), moveToAbsolute(), offset(), resizeBy(), resizeTo()
Functions:captureEvents(), handleEvent(), releaseEvents(), routeEvent()
Event handlers:onBlur, onFocus, onLoad, onMouseOut, onMouseOver, onMouseUp
Collections:layers[]

Each layer in Netscape is somewhat like a separate window or frame. This means it has its own document associated with it which can itself also contain layers. The individual objects cannot be positioned themselves but the layers they live in can be.

The Netscape Layer object has many properties that are similar to the MSIE Style object. However although they bear some similarities, they also have many differences. Furthermore a layer is not a style and therefore it is difficult to conveniently map one to the other and build cross-platform solutions without constructing a compatibility layer.

Note that Netscape prior to version 6.0 instantiates an absolutely positioned <DIV> container as a Layer object.

Event handling support via properties containing function objects was added to Layer objects at version 1.1 of JavaScript.

The example demonstrates how to control a scrolling panel and do it in a way that is cross browser compliant for MSIE and Netscape version 4. There are a lot of issues to deal with, not least the fact that Netscape supports layers but MSIE does not. It is necessary to use layers for scrolling in Netscape because you can only scroll windows or frames in Netscape if they have visible and active scrollbars. Also, the two browsers scroll vertically in opposing directions. If you are careful about the sizing of your objects, and relate the size of the window/frame the layer is drawn in, you can accomplish a continuous scrolling effect by duplicating items from the top of the list to the bottom. Then at an appropriate point, you can jump scroll back to the top of the list. If you do this right, it will appear as if the list is endless and scrolling gently in a continuous loop. This technique is a much simplified example taken from the Video On Demand console at http://www.bbc.co.uk/news where there is a panel showing a listing of live TV programs in a scrolling pane.

Warnings:

Example code:

   <HTML>
   <HEAD>
   <SCRIPT LANGUAGE="JavaScript">
   // Initialize globals
   var theScrollValue = 0;
   var theMaxScroll = 50;
   // Work out what kind of browser we are on
   function getBrowserType()
   {
      var myUserAgent;
      var myMajor;
      myUserAgent   = navigator.userAgent.toLowerCase();
      myMajor       = parseInt(navigator.appVersion);
      if( (myUserAgent.indexOf('mozilla')    != -1) &&
          (myUserAgent.indexOf('spoofer')    == -1) &&
          (myUserAgent.indexOf('compatible') == -1) &&
          (myUserAgent.indexOf('opera')      == -1) &&
          (myUserAgent.indexOf('webtv')      == -1)
         )
      {
         if (myMajor > 3)
         {
            return "nav4";
         }
         return "nav";
      }
      if (myUserAgent.indexOf("msie") != -1)
      {
         if (myMajor > 3)
         {
            return "ie4";
         }
         return "ie";
      }
      return "other";
   }
   // Start the correct scroller for this browser
   function startScroller()
   {
      eval(getBrowserType() + "_scrollPage()");
   }
   // Browser specific scroller (IE)
   function ie4_scrollPage()
   {
      self.scrollTo(0,theScrollValue);
      theScrollValue++;
   
      if(theScrollValue == theMaxScroll)
      {
         theScrollValue = 0;
      }
   
      setTimeout("ie4_scrollPage()", 100);
   }
   // Browser specific scroller (Navigator)
   function nav4_scrollPage()
   {
      self.document.layer1.moveTo(0,-theScrollValue);
      theScrollValue++;
   
      if(theScrollValue == theMaxScroll)
      {
         theScrollValue = 0;
      }
   setTimeout("nav4_scrollPage()", 20);
   }
   </SCRIPT>
   </HEAD>
   <BODY ONLOAD="startScroller();">
   <LAYER TOP=0 LEFT=0 NAME="layer1">
   <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
   <TR HEIGHT=25><TD VALIGN=TOP>Headline 1<BR></TD></TR>
   <TR HEIGHT=25><TD VALIGN=TOP>Headline 2<BR></TD></TR>
   <TR HEIGHT=25><TD VALIGN=TOP>Headline 3<BR></TD></TR>
   <TR HEIGHT=25><TD VALIGN=TOP>Headline 4<BR></TD></TR>
   <TR HEIGHT=25><TD VALIGN=TOP>Headline 5<BR></TD></TR>
   <TR HEIGHT=25><TD VALIGN=TOP>Headline 6<BR></TD></TR>
   </TABLE>
   </LAYER>
   </BODY></HTML>

See also:DIV object, Layer.siblingAbove, Layer.siblingBelow, LayerArray object, style object (2)

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
above1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
background1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
below1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
bgColor1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
clip1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
document1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
hidden1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
left1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
name1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
pageX1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
pageY1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
parentLayer1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
siblingAbove1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
siblingBelow1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , ReadOnly, Deprecated
src1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
top1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
visibility1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
window1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
x1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
y1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
zIndex1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
load()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
moveAbove()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
moveBelow()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
moveBy()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
moveTo()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
moveToAbsolute()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
offset()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
resizeBy()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated
resizeTo()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning , Deprecated

Event nameJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
onBlur1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning
onFocus1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning
onLoad1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning
onMouseOut1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/a Warning
onMouseOver1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/aWarning
onMouseUp1.2 1.2 n/a 4.0 4.0 n/a n/a n/a n/a n/a n/a n/a Warning