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.
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.
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.
Example: dynlayer-properties1.html [source] - for an example with an image change and a form value retrieval using the DynLayer properties.
| Home | Next Lesson: DynLayer Mouse Events |