Generating CSS is an easy concept to understand and it has a lot of applications, especially when developing an entire website with Dynamic HTML. Using document.write() tags you can generate your CSS on the fly according to whatever specifications you want. You could make a layer appear at a random location, or possibly generate hundreds of layers in an ordered fashion.
At the simplest level, to generate CSS is very straight-forward. Just use the document.write() or document.writeln() commands to script the CSS. 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.
Here's an example which writes a single square layer:
<SCRIPT LANGUAGE="JavaScript">
var str = '<STYLE TYPE="text/css">\n'+
'#square1Div {position:absolute; left:50; top:70; width:20; height:20; clip:rect(0,20,20,0); background-color:blue; layer-background-color:blue;}\n'+
'</STYLE>'
document.write(str)
</SCRIPT>
A few tips that I can give is to always put the written CSS in the HEAD of the document. You can't have the CSS inside another layer or Netscape will often ignore it. Also, I'd suggest you follow my example and write all the lines at once and have \n's at the end of each line. And DO NOT USE document.writeln() to write the CSS. I haven't been doing that in the past and it was causing some layout problems on larger pages. But if you follow this format things tend to work fine.
Depending on the situation, you may or may not have to write the actual DIV tags along with that:
<SCRIPT LANGUAGE="JavaScript"> str = '<DIV ID="square1Div"></DIV>' document.write(str) </SCRIPT>
Always try to keep the DIV's in the BODY of the document - do not write the DIV's in the HEAD cause it also causes problems. Below is some code that explicitly writes out one layer, no tricks involved. If you so choose the CSS can be written separately in the header, but it really doesn't matter in either browser.
<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Generated CSS Demo 1</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.writeln('<STYLE TYPE="text/css">');
document.writeln('<\!--');
document.writeln('#square1Div {position:absolute; left:50; top:70; width:20; height:20; clip:rect(0,20,20,0); background-color:blue; layer-background-color:blue;}');
document.writeln('-->');
document.writeln('</STYLE>');
document.writeln('<DIV ID="square1Div"></DIV>');
</SCRIPT>
</BODY>
</HTML>
View generate1.html to see this example. View Source Code
Of course, that by itself is pointless. But now you can start changing things very easily by inserting variable names for which ever properties you want. If you need to write out many layers that are exactly the same, or closely related, you can save yourself some time and file size by writing out the layers in loops. Here I've made an example that writes out a 6 by 6 grid of evenly spaced layers:
<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Generated CSS Demo 2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var str = '<STYLE TYPE="text/css">\n'
for (var i=0;i<=5;i++) {
for (var j=0;j<=5;j++) {
str += '#square'+i+j+'Div {position:absolute; left:'+(50+j*20+j)+'; top:'+(70+i*20+i)+'; width:20; height:20; clip:rect(0,20,20,0); background-color:blue; layer-background-color:blue;}\n'
}
}
str += '</STYLE>'
document.writeln(str)
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
str = ''
for (var i=0;i<=5;i++) {
for (var j=0;j<=5;j++) {
str += '<DIV ID="square'+i+j+'Div"></DIV>\n'
}
}
document.write(str)
</SCRIPT>
</BODY>
</HTML>
View generate2.html to see this example. View Source Code
In that example I have 36 layers that are named according to how they are in the grid - square00 (top-left), square05 (top-right), square50 (bottom-left), square55 (bottom-right), and the rest in between. Once that's done and working, I can then initialize them as Dynamic Layers and have some fun with them. Here I do a loop in the init() function to initialize each layer as a DynLayer by using eval()'s.
function init() {
for (var i=0;i<=5;i++) {
for (var j=0;j<=5;j++) {
eval('square'+i+j+' = new DynLayer("square'+i+j+'Div")')
eval('square'+i+j+'.slideInit()')
eval('drag.add(square'+i+j+')')
}
}
// rest of function
}
I had a bit of fun with this example as I took that it a little further still by using the slide methods. I made it so you can drag each layer in the grid around, and then the hit "reset" with will slide each piece back in place.
View generate3.html to see this example. View Source Code
By generating your layers according to the size of the browser window you can make your layers centered horizontally, vertically or both, or you can make certain layers stretch to fill the whole page. But first you have to retrieve the size of the window. Don't be fooled into using the screen object - that applies to the user's screen resolution. That does not determine the size of the browser window. If you write a layer out based on the resolution it won't look right if someone has their browser set other than the maximum size. To find the size of the window works differently between the browsers...
In Netscape you use:
window.innerWidth window.innerHeight
In IE you use:
document.body.scrollWidth document.body.scrollHeight
These values don't take into consideration the scrollbar. Usually you'll only be conserned about the vertical scrollbar, so you can manually account for it by subtracting 20 from the width in IE, and 16 in Netscape (Netscape excludes the chrome window border). Because IE uses the body tag to find the width, these lines must be in a script that comes after the BODY tag. So a generic template for finding with window width's and height's is as follows:
<HTML>
<TITLE></TITLE>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
if (ns4) {
windowWidth = window.innerWidth-16
windowHeight = window.innerHeight
}
if (ie4) {
windowWidth = document.body.offsetWidth-20
windowHeight = document.body.offsetHeight
}
// write out the layers accordingly
</SCRIPT>
</BODY>
To use these values to center a layer you can do a little math to find where the left/top co-ordinate should be:
And that translated into code is:
var str ='<STYLE TYPE="text/css">\n'+
'#centerlyr {position:absolute; left:'+(windowWidth/2-160/2)+'; top:'+(windowHeight/2-45/2)+'; width:160; height:45; clip:rect(0,160,45,0); background-color:#C0C0C0; layer-background-color:#C0C0C0;}\n'+
'</STYLE>\n'
document.write(str)
generate4.html shows an example that has a layer centenered horizontally, and a layer centered horizontally and vertically. View Source Code
| Home | Next Lesson: Page Templates |