Generating layers is an easy concept to understand and it has a lot of applications, especially when developing an entire websites with Dynamic HTML, or getting into more complex DHTML. Using document.write() commands you can generate your CSS and DIV tags according to whatever specifications you want.
A lot of possibilities are opened when you take this approach:
I'll show how you can accomplish each of these tasks by following a few simple guidelines.
To generate a layer is very straight-forward. Just use the document.write() command to script the CSS and DIV's. The only trick is that you have to document.write the <STYLE> tag along with the CSS. If you don't, things tend not to render properly in Netscape. I've found the following set-up to be the most problem-free:
var str = '<STYLE TYPE="text/css">\n'+ '#mylayerDiv {position:absolute; left:50; top:70; width:80; height:20; clip:rect(0,80,20,0); background-color:yellow; layer-background-color:yellow;}\n'+ '</STYLE>' document.write(str)
Usually there's no problems in IE, but I've found a few problems with Netscape that you'll want to avoid to save yourself a lot of headache.
Stick to those guidelines and you'll be okay.
Often its not necessary to SCRIPT the writing of the DIV's. You'll only need to do this if you're planning on making a widget of some sort, or write many DIV's that are alike in some manner. It works as expected:
<SCRIPT LANGUAGE="JavaScript"> str = '<DIV ID="mylayerDiv">my layer</DIV>' document.write(str) </SCRIPT>
Always keep the DIV's in the BODY of the document.
So a basic template to follow looks like this:
<HTML> <HEAD> <TITLE>The Dynamic Duo - Generated Layers Demo [Simple]</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var str = '<STYLE TYPE="text/css">\n'+ '#mylayerDiv {position:absolute; left:50; top:70; width:100; height:20; clip:rect(0,100,20,0); background-color:yellow; layer-background-color:yellow;}\n'+ '</STYLE>' document.write(str) //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> <!-- var str = '<DIV ID="mylayerDiv">my layer</DIV>' document.write(str) //--> </SCRIPT> </BODY> </HTML>
View generate1-simple.html to see this example. View Source Code
Something I've been doing to make it nicer to generate CSS is to use a central function which returns the CSS syntax for you. This way you avoid having to rewrite the left, top, width, height etc. for each layer. This makes your code cleaner and will save some file size if you're planning on doing a lot of this. In fact, I've found using the following 2 functions so nice that I tend not to manually write the CSS anymore at all. Because of their immense usefulness, I have included these in my DynLayer as well, so you only need to include these functions if you are not using the DynLayer:
function css(id,left,top,width,height,color,vis,z,other) { if (id=="START") return '<STYLE TYPE="text/css">\n' else if (id=="END") return '</STYLE>' var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;' if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;' if (arguments.length>=5 && height!=null) { str += ' height:'+height+'px;' if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);' } if (arguments.length>=6 && color!=null) str += (ns4)? ' layer-background-color:'+color+';' : ' background-color:'+color+';' if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';' if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';' if (arguments.length==9 && other!=null) str += ' '+other str += '}\n' return str } function writeCSS(str,showAlert) { str = css('START')+str+css('END') document.write(str) if (showAlert) alert(str) }
Here's an example of how to use the css() function:
var str = css('START')+ css('mylayerDiv',50,100)+ css('END') document.write(str)
You set up a string containing all the CSS needed, and then document write it to the browser.
The writeCSS() function just makes this a little less of a hassle:
writeCSS ( css('mylayerDiv',50,100) )
In either case, the CSS written to the page would be:
<STYLE TYPE="text/css"> #mylayerDiv {position:absolute; left:50px; top:100px;} </STYLE>
There is a showAlert parameter in the writeCSS() function which you can use when debugging your code. By sending a true boolean value in the writeCSS() it'll automatically show a dialog containing what CSS was written to the browser.
writeCSS ( css('mylayerDiv',50,100) ,1) // send true value for a second argument to see the output
The css() function should be pretty self-explanitory, except for the following...
The most notable is how I worked with the height and clip values. 99% of the time you want to set the height of your layer, you also want to clip the layer to that same value. For example, if you want to make a colored square, you'd have the width and the height the same as the clip right and clip bottom values. On the other hand, if you are just placing some text or an image you don't need to clip it and you don't have to set the height either. So what I've done with the CSS function is when you set the height, it also sets the clip values to (0,width,height,0) - which is the most common situation.
However, in the cases where you want the clip values to be different than the width and height, you may use the other property and send your own 'clip:rect()' CSS. When you do this it will write your clip CSS instead of making it's own based on the width and height.
You can also make the layer positioned relatively by sending null for both the left and top values. In fact any of the values you don't want, just send a null value for and it won't write them. And by sending an ID of "START" or "END" it writes the appropriate STYLE tag to start or end the CSS syntax.
So its a pretty good function to use if plan on doing this stuff a lot. I will be using these functions qutie a bit. Here's that last layer template based on the CSS function:
<html> <head> <title>The Dynamic Duo - Generated Layers Demo [CSS Function]</title> <script language="JavaScript"> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function css(id,left,top,width,height,color,vis,z,other) { if (id=="START") return '<STYLE TYPE="text/css">\n' else if (id=="END") return '</STYLE>' var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;' if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;' if (arguments.length>=5 && height!=null) { str += ' height:'+height+'px;' if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);' } if (arguments.length>=6 && color!=null) str += (ns4)? ' layer-background-color:'+color+';' : ' background-color:'+color+';' if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';' if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';' if (arguments.length==9 && other!=null) str += ' '+other str += '}\n' return str } function writeCSS(str,showAlert) { str = css('START')+str+css('END') document.write(str) if (showAlert) alert(str) } writeCSS( css('mylayerDiv',50,70,100,20,'yellow') ) //--> </script> </head> <body bgcolor="#FFFFFF"> <div id="mylayerDiv">my layer</div> </body> </html>
View generate2-cssfunction.html to see this example. View Source Code
Now that we have a good way to go about generating layers, we can start getting to the whole reason for doing this. By generating layers in this manner we have a great way to substitute static numbers in your CSS for variables and begin getting into the real meat of dynamically generated pages using DHTML.
By doing loops you can use this technique to generate any number of layers in any way you want. You could generate dozens of layers in random positions, or create grids of layers. The following examples show the latter. They're straight-forward, I'm pretty sure you'll be able to follow along with the source code:
generate3-multiple.html creates a grid of blue squres - View Source Code
generate4-smartblocks (The Smart Blocks Demo) is similar to the previous but with some added functionality using the DynLayer - View Source Code
Home | Next Lesson: Using Browser Width/Height |