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

OO-style approach - lightweight reusable component-based design
Supported in 5.x+ browsers (minus IE:mac and some limitations under NS6.0)
Multiple color schemes supported via CSS
Relatively easy structured HTML implementation
Javascript automagically handles creation of box elements
Degrades gracefully in older (crappier) and non-supported/capable browsers

Unintended features (bugs) + drawbacks

Does not work under IE:mac for some reason (script avoids applying styles for the time being)
Separate images required for each color type
Corner images need to match body background color
IE:win32 workaround for resizing (CSS rounding error?) - likely slows down redraw
Occasional content reflow / sizing bug (corner images do not appear in correct positions) when dynamically-written (DHTML, via .innerHTML or document.write) content is involved

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

V1.0.20030701
- Initial release

About The Developer

Scott Schiller
- schillmania.com | personal experimental design site
- scottschiller.com | technical work and experience portfolio site
- E-mail

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.