Inside Technique : Cool Rules : Creating a Rule

No matter if you are generating the rule on the client or server you add it to the page in the same manner. You include the small script that generates the rule and then insert another script at the location you want the rule. Where you want the rule, the script calls the createHR() function and outputs the generated HTML into the document. To create a rule on the client like the one on the first page, you call the createHR() function as follows:

 <SCRIPT>
  document.write(createHR("000000","FFFFFF",32,150,3, true, false, "center"))
 </SCRIPT>

The createHR() function returns an HTML table that represents the rule. If you are reusing the same rule multiple times in your document, you should cache the return value in a variable and write the variable into the document. This will improve performance as the table only needs to be calculated once. For example:

 <SCRIPT>
  blendToWhite = createHR("000000","FFFFFF",32,150,3, true, false, "center")
  document.write(blendToWhite)
  document.write(blendToWhite)
 </SCRIPT>

The createHR() function has 5 required arguments representing the start and end colors, the number of steps, and the size. In addition there are three optional arguments for creating a cross browser rule, the rule's direction, and the rule's alignment. Below is the complete prototype and description of arguments for the createHR() function:

  createHR(startColor, endColor, steps, width, height 
           [, crossBrowser, direction [, align ]]])

	startColor The color to start from in hex. endColor The color to finish to in hex. steps The number of steps to take to blend from the start to finish width The width of the rule height The height of the rule crossBrowser An optional argument specifying whether to create a cross-browser rule. A cross-browser rule requires a single pixel transparent gif to work.(default is false, IE4 only) direction An optional argument specifying whether the rule should be created horizontal or vertical. (default is false, horizontal) align An optional argument specifying whether the rule should be aligned left or right. Valid values are "left", "right", "center", or "none" (Navigator 3.0 ignores center, Navigator 4.0 sometimes has problems with left and right alignment).

We created a very simple page that demonstrates the variety of rules that can be created with the createHR() function.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.