Central CSS Function For Cross Browser usage

The main task of this function is to avoid rewriting the left, top, width & height, etc for each layer. Most of the time when 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 with this CSS function, 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)

Note: 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.

The CSS Function is as written below

// CSS Function // returns CSS syntax for generated layers 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 += (document.layers)? ' 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) }

The writeCSS() Function

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

Here's a simple 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>