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

Initialization of DynLayers

The DynLayer can be applied to any layer using this general format:

objectName = new DynLayer(id,nestref,iframe)

Where:

objectName: Name of the object - how you will reference the DynLayer object.
id: ID of the layer to which this DynLayer is being applied to, this cannot be the same as the objectName
nestref (now optional in most circumstances): Nested reference to that layer
iframe: Name of the iframe that the layer is contained. This is used when you need to manipulate a layer inside an IFrame. Currently IFrame is only a feature of is.ie.

Simple Layer Example:

Let's say you have a very simple layer with this structure:

<STYLE>
#mylayerDiv {position:absolute; left:30; top:50;}
</STYLE>

<DIV ID="mylayerDiv"></DIV>

To initialize 'mylayerDiv', your javascript will be:

mylayer = new DynLayer('mylayerDiv')

Notice how I append the 'Div' extension on the ID of the layer. I do this is because the name of the object cannot be the same as the ID of the layer. It's just a nice way to keep your variables separate.

Nested Layer Example:

I updated the DynLayer so that in most circumstances working with nested layers is exactly the same as working with non-nested layers.

If you have nested layers like this:

<DIV ID="myparentDiv">
	<DIV ID="mylayerDiv"></DIV>
</DIV>

If you wanted to use the nestref parameter you could initialize both of them like this::

myparent = new DynLayer('myparentDiv')
mylayer = new DynLayer('mylayerDiv','myparentDiv')

However, nestref is now optional, so you if you don't send the nestref parameter for the nested layer it will still work:

myparent = new DynLayer('myparentDiv')
mylayer = new DynLayer('mylayerDiv')

Notice the name of the parent layer is passed for the nestref argument.

Nestref for Multiple Nesting:

Again, no difference here, simply send the ID of the layer to the DynLayer and it will take care of the nested referencing itself. But for argument's sake, lets say you had these layers:

<DIV ID="myparent1Div">
	<DIV ID="myparent2Div">
		<DIV ID="mylayerDiv"></DIV>
	</DIV>
</DIV>

In this case if you need to use the nestref parameter you must pass the names of all layers in that hierarchy separated by '.document.':

mylayer = new DynLayer('mylayerDiv','myparent1Div.document.myparent2Div')

The pattern continues no matter how many times it's nested.

Working with Layers in separate Frames:

The DynLayer can be used to work with layers that are withing separate Frames, or IFrames (for IE only). In this case sending a nestref parameter for nested layers is manditory.

Note: This has changed, you must now send the frame reference as an object, no longer as a string

mylayer = new DynLayer('mylayer',null,parent.myframe)  // send the frame object reference

Assigning DynLayers Using Arrays:

If you have a sequencial set of layers you could alternatively assign DynLayers to Arrays rather than just variable names.

<DIV ID="mylayer1"></DIV>
<DIV ID="mylayer2"></DIV>
<DIV ID="mylayer3"></DIV>
<DIV ID="mylayer4"></DIV>

To initialize these you could do:

mylayer = new Array()
for (var i=0;i<4;i++) {
	mylayer[i] = new DynLayer("mylayer" + i)
}

Initialization Demos:

Example: dynlayer-initialization1.html for an example showing various initializations, using the nestref parameter.

Example: dynlayer-initialization2.html for that same example but without using any nestref parameters, notice it still works the same.

Example: dynlayer-frame1.html for an example of using the DynLayer with frames. You probably should look at how I've set up the two frame pages used: dynlayer-frame1-top.html and dynlayer-frame1-bottom.html.