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>
Example: generate1-simple.html [source]
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 the css functions if you are not using the DynLayer:
CSS Functions Source Code:
The syntax for calling the css() function is:
css(id,left,top,width,height,color,vis,z,other)
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.
Examples:
// return "#mylayer {position:absolute; left:50px; top:100px;}"
css('mylayer',50,100)
// return "#mylayer {position:relative; width:200px; background-color:#ff0000; layer-background-color:#ff0000;}"
css('mylayer',null,null,200,null,'#ff0000')
// return "#mylayer {position:absolute; left:50px; top:100px; width:200px; height:200px; clip:rect(0px 200px 200px 0px);}"
css('mylayer',50,100,200,200)
There are 2 options in this function:
css('START') // returns "<style type="text/css">"
css('END') // returns "</style>"
Here's an example of how to use the css() function to write a layer:
var str = css('START')+
css('mylayerDiv',50,100)+
css('END')
document.write(str)
You just set up a string containing all the CSS needed, and then document write it to the browser. It is recommended that you only write one set of CSS. If you try to do 2 of the above writing it will hang Netscape 4.0 and 4.01. If it's absolutely necessary you can separate each css writing into separate <script> tags.
writeCSS(str,showAlert)
The writeCSS() function (also included in css.js) just makes this a little less of a hassle. The str parameter is the string of CSS that you want to write to the page. writeCSS() will automatically add the css('START') and css('END') values to the front and end of the string and write the resultant string to the page:
writeCSS (
css('mylayerDiv',50,100)
)
writeCSS() also has the showAlert option to display an alert dialog of the CSS string being written to the page. This option is only for debugging purposes:
writeCSS (
css('mylayer1Div',50,100)+ // must add css() calls together
css('mylayer2Div',50,100)+
css('mylayer3Div',50,100)
,1) // send true (or 1) to display a dialog
So the combination of these 2 functions are really great if plan on doing this stuff a lot. I will be using these functions quite 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" src="../dynapi/css.js"></script>
<script language="JavaScript">
<!--
writeCSS(
css('mylayerDiv',50,70,100,20,'yellow')
)
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="mylayerDiv">my layer</div>
</body>
</html>
Example: generate2-cssfunction.html [source] - to see this example.
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.
Example:
var x = 20+15/5
var y = 100+50/5
writeCSS(
css('mylayer',x,y)
)
This tactic will be used extensively in the upcoming lessons.
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:
Example: generate3-multiple.html [source] - creates a grid of blue squres
The Smart Blocks Demo is similar to the previous but with some added functionality using the DynLayer
| Home | Next Lesson: Using Browser Width/Height |