Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

The JavaScript FAQ
Prev Home Next

Creating Layers

Question: How do I create a new layer from JavaScript?

Answer: Normally, you create layers by using DIV tags in the HTML source code of your page. However, you can also create layers programmatically with JavaScript! Here's an example:

The above example has been created using this code:

<form>
<input type=button value="Create layer"
onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)">
<input type=button value="Delete layer"
onClick="deleteLayer('LYR1')">
</form>
To create a new layer, this code calls the function makeLayer:
makeLayer(ID,left,top,width,height,color,visible,zIndex)
And here's the JavaScript source code of this function:
function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) {
 if (document.layers) {
  if (document.layers[id]) {
   alert ('Layer with this ID already exists!')
   return
  }
  var LR=document.layers[id]=new Layer(W)
  LR.name= id
  LR.left= L
  LR.top = T
  LR.clip.height=H
  LR.visibility=(null==visible || 1==visible ? 'show' : 'hide')
  if(null!=zIndex)  LR.zIndex=zIndex
  if(null!=bgColor) LR.bgColor=bgColor
 }
 else if (document.all) {
  if (document.all[id]) {
   alert ('Layer with this ID already exists!')
   return
  }
  var LR= '\n<DIV id='+id+' style="position:absolute'
  +'; left:'+L
  +'; top:'+T
  +'; width:'+W
  +'; height:'+H
  +'; clip:rect(0,'+W+','+H+',0)'
  +'; visibility:'+(null==visible || 1==visible ? 'visible':'hidden')
  +(null==zIndex  ? '' : '; z-index:'+zIndex)
  +(null==bgColor ? '' : '; background-color:'+bgColor)
  +'"></DIV>'
  document.body.insertAdjacentHTML("BeforeEnd",LR)
 }
}

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

The JavaScript FAQ
Prev Home Next


 
 
  Mirrored with kind permission of Alexei Kourbatov Design by Interspire