SCHILLMANIA!

  |  BoxLib v1.0.20030701
Reusable component-based Javascript box library

About

Purpose

To provide a clean and gracefully-degrading "rounded corners" box/content container design via Javascript/CSS/DOM manipulation under 5.x+ browsers

Features

Unintended features (bugs) + drawbacks

Customization

BoxLib uses two (optionally three) images for each style - one for the top highlight, one for the bottom shadow and optionally one for the <hr /> style line. You can follow the given example images and create your own variants from there. Experimentation is encouraged!

Release History

About The Developer

General Disclaimer

The code, images and other content in this library is provided on an "as-is" basis and may or may not be suitable to your uses. I cannot and will not be held responsible nor liable for headaches, lowered productivity, frustration, lost time or girlfriends or anything else that is generally bad that may occur as a result of using this thing; I just figured someone would find it useful! :)

Resources

Example

Not sure how this works? View some basic examples.

Download

Download this library (11.3 KB, .ZIP)

Code examples

The HTML structure is simple: A containing element is assigned box and color classes, respectively. "Box" indicates that there is a box element, and the color class determines the coloring of the box. The "abs" class can also be included (ie. classname="box abs color1") if absolute positioning is to be used.

Within the containing element is a "content" element, which naturally envelops the content to be displayed.

HTML <-- basic code for this "resources" box -- >
<div class="box color2">
 <div class="content">
  <h1>Resources</h1>
  <div class="line"></div>
  <h2>Code</h2>
  <b>Sample HTML</b>
 </div>
</div>
CSS
    /* Top highlight image */
    .color0 {
     background-color:#eeeeee;
     background-image:url(image/box_highlight_eeeeee.gif);
    }
	
    /* Content area
    .color0 .content {
     color:#555555;
    }
	
    /* Divider element (similar to HR) */
    .color0 .line {
     background-image:url(image/line_eeeeee.gif);
    }
    
    /* Bottom shadow image */
    .color0 .shadow {
     background-image:url(image/box_shadow_eeeeee.gif);
    }
    
Required references <script type="text/javascript" src="boxlib.js"></script>

Technical Notes

To create a rounded corner effect, Boxlib dynamically creates and appends absolutely-positioned DIV elements with background images. The highlight and shadow effects (top and bottom) are also added via script. A <link> reference to boxlib.css is dynamically created as well (so you don't have to.)

These elements are created entirely by script, so by default there is no extra code (aside from the base HTML structure with no CSS) to confuse older browsers.