Revision #2: Incorporated the nestref property to allow the dynamic creation and deletion of nested layers.
Revision #1: With the help of fellow JavaScripters made a destoryLayer() function to go along with the createLayer() function.
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:
Although it is not specifically stated in the documentation, you can also delete a layer as easily as it is created. To accomplish this you hide the layer, and then delete the reference to it:
document.layers[id].visibility = "hide" delete document.layers[id]
This will work as expected, and you will no longer be able to reference the layer.
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 3 commands:
document.all[id].style.visibility = "hidden" document.all[id].innerHTML = "" document.all[id].outerHTML = ""
You first hide the layer, then set both the innerHTML and outerHTML of that layer to null.
Instead of explicitly writing code to create and destroy each layer, you can use these cross-browser functions which I include in a file call createdestroy.js:
// createLayer() and destoryLayer() Functions
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
function createLayer(id,nestref,left,top,width,height,content,bgColor,visibility,zIndex) {
if (ns4) {
if (nestref) {
var lyr = eval("document."+nestref+".document."+id+" = new Layer(width, document."+nestref+")")
}
else {
var lyr = document.layers[id] = new Layer(width)
eval("document."+id+" = lyr")
}
lyr.name = id
lyr.left = left
lyr.top = top
if (height!=null) lyr.clip.height = height
if (bgColor!=null) lyr.bgColor = bgColor
lyr.visibility = (visibility=='hidden')? 'hide' : 'show'
if (zIndex!=null) lyr.zIndex = zIndex
if (content) {
lyr.document.open()
lyr.document.write(content)
lyr.document.close()
}
}
else if (ie4) {
var str = '\n<DIV id='+id+' style="position:absolute; left:'+left+'; top:'+top+'; width:'+width
if (height!=null) {
str += '; height:'+height
str += '; clip:rect(0,'+width+','+height+',0)'
}
if (bgColor!=null) str += '; background-color:'+bgColor
if (zIndex!=null) str += '; z-index:'+zIndex
if (visibility) str += '; visibility:'+visibility
str += ';">'+((content)?content:'')+'</DIV>'
if (nestref) {
index = nestref.lastIndexOf(".")
var nestlyr = (index != -1)? nestref.substr(index+1) : nestref
document.all[nestlyr].insertAdjacentHTML("BeforeEnd",str);
}
else {
document.body.insertAdjacentHTML("BeforeEnd",str)
}
}
}
function destroyLayer(id,nestref) {
if (ns4) {
if (nestref) {
var str = "document."+nestref+".document."+id
eval(str+".visibility = 'hide'");
eval("delete "+str)
}
else {
document.layers[id].visibility = "hide"
delete document.layers[id]
}
}
else if (ie4) {
document.all[id].style.visibility = "hidden"
document.all[id].innerHTML = ""
document.all[id].outerHTML = ""
}
}
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 destoryed. It also assigns a DynLayer and destorys it as well.
createdestroy2.html - a more complex example, utilizing the drag object to create and destroy multiple layers.
| Home |