In both the browsers there is a way to add new layers to the page on the fly (after the page is fully loaded). Again this is a situation where the solution is completely different between the browsers. However there is one crippling obstacle that I haven't been able to get around which makes it impossible to use this technique to it's full potential.
Creating a New Layer in Netscape:
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])
Thanks to Bill Sager for showing me how to do that.
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 I know to truely delete a Layer in Netscape. So the closest thing we can do is simply hide the layer.
document.layers[id].visibility = "hide"
Want a challenge?
It is theorized that a solution could be created which keeps track of which layers have been deleted (keep track of their indexes), and then when you create new layers re-assign the indexes of deleted ones. So if you want a challenge that no one has been able to solve yet here's your chance! Please notify me of any solutions, even partial experimental ones.
Creating a New Layer IE:
Internet Explorer's ability to work with HTML as if it were a string allows you to add more layers as you please. I recommend this be done 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 I had 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, as a few other JavaScripters (Erik Arvidsson and Thomas Brattli) mentioned, 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 = ""
createLayer(id,nestref,left,top,width,height,content,bgColor,visibility,zIndex) destroyLayer(id,nestref)
The usage should be obvious - id and nestref they are the same as for a Dynlayer. The left, top, and width properties are required, the rest are optional. After you create the layer you could assign DynLayers to them and work with them that way. I've created 2 demos that should illustrate how you can use this function:
createdestroy1.html - a simple example that shows one layer being created and destroyed. It also assigns a DynLayer and deletes it as well.
createdestroy2.html - a more complex example, utilizing the drag object to create and destroy multiple smiley faces.
Download: createdestroy.js
View Source: createdestroy.js
| Home | Next Lesson: CGI Communication |