Creating & Destroying Layers (Cross Browser DHTML)

Creating & Destroying Layers

Creating & Destroying Layers is a situation where the solution is completely different between the browsers.

In Netscape, to add a new layer to the page you simply create a new Layer object:

document.layers[id] = new Layer(width)

For a nested layer you must call the new Layer command like this:

document.layers[parentLayer].document.layers[childLayer] = new Layer(width, document.layers[parentLayer])

After the layer is created you can then assign the properties and add the content to the layer using JavaScript:

document.layers[id] = new Layer(400)

document.layers[id].left = 40

document.layers[id].top = 100

document.layers[id].height = 300

document.layers[id].bgColor = "blue"

document.layers[id].visibility = "show"

document.layers[id].document.open()

document.layers[id].document.write("This is my content")

document.layers[id].document.close()

etc.

Once all this is done, you can use the layer as normal

Removing a Layer in Netscape:

Unfortunately there is no way that is known to truely delete a Layer in Netscape. So the closest thing we can do is simply hide the layer.

document.layers[id].visibility = "hide"

 

Adding Layer in Internet Explorer

Internet Explorer's ability to work with HTML as if it were a string allows you to add more layers as you please. Its recommend that using IE's insertAdjacentHTML(). If you use the innerHTML property it will cause some unexpected results.

To add another layer (or any other HTML for that matter) to the body of the document, you call the method in this manner:

document.body.insertAdjacentHTML(string)

Where string is a string of text or HTML that needs to be appended to the end of the page. So to create a layer you can pass a DIV tag with the style assign using the old inline technique if you prefer (remember IE doesn't have problems with inline styles):

document.body.insertAdjacentHTML('

<DIV ID="layerName" STYLE="position:aboslute; left:40; top:100;">

This is my content

</DIV>')

To create a nested layer you can apply the insertAdjacentHTML() method to the parent layer just as you do the body of the document:

document.all[id].insertAdjacentHTML(string)

Removing a Layer in IE:

Initially it was though that the only way to delete a layer in IE was to do string manipulation to the document.body.innerHTML property of the page. However this creates some severe problems as "phantom" HTML elements get introduced. Fortunately there indeed is a pretty easy way to delete a layer in IE. You can use a combination of innerHTML and outterHTML on that particular layer only. It does work, and does not cause the problem seen when using document.body.innerHTML.

To remove a layer you can do these 2 commands:

document.all[id].innerHTML = ""

document.all[id].outerHTML = ""