The Dynamic Duo - The Dynamic Layer Object API [Properties]



loc = "../"






document.write(toccss)
document.write(tochtml)

DynLayer Properties

Once you have applied the DynLayer to a layer, you have a unified way of referencing the layer for both Netscape and IE. From that point on you can use the DynLayer to retrieve and change the properties of the layer using a single command.

Core Properties

In most cases it is only necessary to have movement control of the layer. The core properties of the DynLayer provide the foundation for controlling the location of a layer.


css - points to the CSS properties of the layer
elm - points to the actual HTML element
id - retrieves the ID of the layer/element
x - stores the "left" location
y - stores the "top" location
w - captures the initial width
h - captures the initial height
doc - points to the document object for the layer
obj - a string property of the object which points to itself


The css Property:

The css property is the way you directly reference the CSS properties of the layer. It is the equivalent to how I've used pointers in previous lessons. For Netscape it points to document.layer[id], and for IE it points to document.all[id].style

When you need to retrieve or change any of the CSS properties you reference the property in this manner:


objectName.css.propertyName


For example to retrieve the z-index of a "mylayer" DynLayer you'd use:


mylayer.css.zIndex


This can be done for any of the CSS properties. However in practice it is rarely necessary to call the css property manually because the DynLayer takes care of most of them: left, top, visibility, and clip value. The only property that you'd ever really need to access using the css property is zIndex.

The elm Property:

This points to the actual HTML element object. For Netscape it is equivalent to the css property. But for IE it points to document.all[id] rather than document.all[id].style. For basic DHTML animation and such this property isn't necessary, but there are situations where this is needed (check the Using Layer-based Events and Scroll Concepts lesson for an example).

The x and y Properties:

The x and y properties always contain the current location of the layer. They are equivalent to how I've been using the xpos and ypos properties in previous lessons. Using these separate properties is a personal preference of mine because I fell it is cleaner (as well as more efficient) to access the location of a layer as a property.

To retrieve the current location of the layer you use either:


objectName.x
or
objectName.y


As before, you have to ensure that the x and y properties are in synch with the actual left and top properties by copying the values:


objectName.x += 10
objectName.left = objectName.x


But you often never have to do that because I've included the moveTo() or moveBy() methods which change the location of the layer for you.

Instead of having the x and y properties you could optionally write your own methods like getLeft() or getTop() for extracting the current location. But you can do that on your own if you want to.

The w and h Properties:

Just as you can retrieve the location of the layer using x and y, you can retrieve the width and height of the layer using w and h:


objectName.w
or
objectName.h


The doc Property:

The doc property can be used when you want to access other elements inside the layer such as images and forms. In Netscape it points to document.layers[id].document, but in IE it points just to the main document. This is necessary because Netscape handles contents in layers as separate documents.

Element inside the layer should be called by:


mylayer.doc.elementName



// changing images
mylayer.doc.images["myImage"].src = newimage.src

// get form value
mylayer.doc.myform.myformfield.value


Read the Changing Images and Working With Forms lessons for more thorough explanations on those topics. There is also the image() method extenson.

The obj Property

The obj property is a string reference to the DynLayer. This property is necessary when methods use setTimeouts, setInterval, or eval's to call itself. Both of those statements only accept strings. For example you cannot have a setTimeout inside a method when it is set up like this:


setTimeout(this + ".methodName()",100)


Instead you have to use the obj property:


setTimeout(this.obj + ".methodName()",100)


The obj property is used by addon methods such as the slide and wipe methods, as well as other objects that use the DynLayer, and all my widget objects. It's extremely useful.

View dynlayer-properties1.html for an example with an image change and a form value retrieval using the DynLayer properties.

The Dynamic Layer Object API

Initialization
DynLayerInit() Function
Properties
Using Layer-based Events
Hide, Show, Move Methods
Slide Methods
Clip Methods
Write Method
css() and DynLayerTest() Functions
Download: dynlayer.js
View Source: dynlayer.js



Home
Next Lesson:
DynLayer Extensions


copyright 1998 Dan Steinman