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

Core Properties and Methods

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.

The DynLayer has 3 core properties: css, x, and y, and 4 core methods: hide(), show(), moveBy(), and moveTo().

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. 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 visibility you'd use:

mylayer.css.visibility

This can be done for any of the properties. However for working with the positions and changing the visibility I have built-in methods which make this work much easier.

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. Instead of having these properties you could optionally make methods (like getLeft() or getTop()) for extracting the current location. But you can do that on your own if you want to.

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

objectName.x
or
objectName.y

Remember in that when working with the x and y properties, you have to keep their values in synch with the real left and top location. To eliminate the need to do this on your own, I've included 2 methods for changing the location of the layer:

The moveTo() Method:

The moveTo() method moves the layer to a specific coordinate:

objectName.moveTo(x,y)

If you need to only change one of x or y why you can send null for the value:

objectName.moveTo(x,null)
or
objectName.moveTo(null,y)

Examples:

mylayer.moveTo(100,50)
mylayer.moveTo(100,null)
mylayer.moveTo(null,50)

The moveBy() Method:

The moveBy() method will shift the location of a layer by a specified number of pixels:

objectName.moveBy(x,y)

Example:

mylayer.moveBy(5,0)

The show() and hide() Methods:

For changing the visibility I've included the methods show() and hide(). Their are no parameters to pass so their usage is simple:

objectName.show()
objectName.hide()

In the standard DynLayer I haven't included any way to retrieve the visibility, only because I've found there's very few instances where you need to find the visibility (usually you already know if it's visible or not). But you could of course extend the DynLayer to keep track of that if need be.

Core Properties and Methods Demo:

View dynlayer-core1.html to view an example showing retrieval of the core properties and usage of the core methods.

The Dynamic Layer Object