Layer object

	JavaScript Programmer's Reference
Prev	Home	Up		Next

Availability:

JavaScript - 1.2

Netscape version - 4.0

Deprecated

JavaScript syntax: N myLayer = myDocument.aLayerName

N myLayer = myLayerArray[anIndex]

HTML syntax: <ILAYER>, <LAYER>

Argument list: anIndex An 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:

If you are using layers to position items temporarily on the screen, then you should be careful when using absolute positioning. This can cause the layer to be absolutely positioned relative to the current mouse position and not the window border. The effect is that an item in the positioned layer will appear to follow the mouse as it is clicked. You may need to work out the mouse position and then calculate an offset to relocate the layer where you want it. You may be able to detect the mouse by removing focus from the layer that has the problem, or it may be necessary to create an empty layer which can be safely attached to the mouse. All of these issues are Netscape 4 specific.
Layers are no longer supported in Netscape 6.0.

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)

Property	JavaScript	N	Notes
`above`	1.2	4.0	, ReadOnly, Deprecated
`background`	1.2	4.0	, Deprecated
`below`	1.2	4.0	, ReadOnly, Deprecated
`bgColor`	1.2	4.0	, Deprecated
`clip`	1.2	4.0	, Deprecated
`document`	1.2	4.0	, ReadOnly, Deprecated
`hidden`	1.2	4.0	, Deprecated
`left`	1.2	4.0	, Deprecated
`name`	1.2	4.0	, ReadOnly, Deprecated
`pageX`	1.2	4.0	, Deprecated
`pageY`	1.2	4.0	, Deprecated
`parentLayer`	1.2	4.0	, ReadOnly, Deprecated
`siblingAbove`	1.2	4.0	, ReadOnly, Deprecated
`siblingBelow`	1.2	4.0	, ReadOnly, Deprecated
`src`	1.2	4.0	, Deprecated
`top`	1.2	4.0	, Deprecated
`visibility`	1.2	4.0	, Deprecated
`window`	1.2	4.0	, Deprecated
`x`	1.2	4.0	, Deprecated
`y`	1.2	4.0	, Deprecated
`zIndex`	1.2	4.0	, Deprecated

Method	JavaScript	N	Notes
`load()`	1.2	4.0	, Deprecated
`moveAbove()`	1.2	4.0	, Deprecated
`moveBelow()`	1.2	4.0	, Deprecated
`moveBy()`	1.2	4.0	, Deprecated
`moveTo()`	1.2	4.0	, Deprecated
`moveToAbsolute()`	1.2	4.0	, Deprecated
`offset()`	1.2	4.0	, Deprecated
`resizeBy()`	1.2	4.0	, Deprecated
`resizeTo()`	1.2	4.0	, Deprecated

Event name	JavaScript	N
`onBlur`	1.2	4.0
`onFocus`	1.2	4.0
`onLoad`	1.2	4.0
`onMouseOut`	1.2	4.0
`onMouseOver`	1.2	4.0
`onMouseUp`	1.2	4.0

Prev	Home	Next
Language codes	Up	Layer()
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions.

JavaScriptProgrammer'sReference

Layer object (Object/Navigator)

Warnings:

Example code:

JavaScript
Programmer's
Reference