GlassBox

NEW: More detailed documentation and more examples.

Create Clear and Colorful Web Applications

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and "Flash-like" effects. The GlassBox library ..

• is easy to use
• is customizable and skinnable
• comes with a coherent API (CSS based parameter) and a short introduction
• includes a basic Ajax XHR for dynamic content loading
• is tested with IE 6 + 7, Firefox 2, Opera 9 and Safari 3 (mac + win)
• and is an open source project under MIT license

Note: Use keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

Usage

1. Unzip the GlassBox.zip. Include the GlassBox script in the head section of your document:

<script src="glassbox/glassbox.js" type="text/javascript"></script>

2. Put the content for your GlassBox into a div in the body section of your document:

<div id="myGlassboxContent">
  <!-- Content -->
</div>

3. Create a new object and define first (init) id, width, height and overflow, and second (apos) position left and top (see API DOC):

<script type="text/javascript">
var myGlassBox = new GlassBox();
myGlassBox.init( 'myGlassboxContent', '400px', '300px', 'auto' );
myGlassBox.apos( '290px', '35px' );
</script>

Examples

Without script.aculo.us and prototype:

• Minimal example
• Flashnotice example 1
• Lightbox example 1

With script.aculo.us and prototype:

• Flashnotice example 2
• Lightbox example 2
• Complex example: Single Source Publishing (this application)

With Ajax GETrequest:

• Flashnotice example 3
• Lightbox example 3

Background images and file size

An adequate background is essential for the visual effect of a GlassBox object. I use for this demo website eight big JPEG images (1600x1200 pixel) - for each 'page' one. The result: long loading time (for the user), high traffic and costs per user (for the owner of the website) and - last but not least - needless burden for the Nature (carbon dioxide (CO₂) emissions and resource consumption). Bad!

This is not a problem, if you use GlassBox as a 'Lightbox' or 'Flashnotice' tool (normally no need to use special background images). The size of the 'light' package (compressed script and default skin images) amounts under 25 kb. But if you plan to work with fullscreen images - use all possibilities to reduce the data volume: Reduce the number of colors in GIF images, reduce the JPG quality down to 40%, try different blur filter, ..

Be creative!

API Documentation

Create and initialize a glassbox object

var myGlassBox = new GlassBox();
myGlassBox.init( 'myGlassBox', 
   '450px', '360px', 'hidden', 'white', true, false
);

Four different ways to display a glassbox object

myGlassBox.ipos();

myGlassBox.apos( '690px', '35px' );

myGlassBox.vscreen( '50px', '5px' );

myGlassBox.lbo( true, 0.50 ); 

Visual Effects

myGlassBox.appear(3000);

myGlassBox.draggable();

Miscellaneous

myGlassBox.zindex('100');

Ajax GETrequest

GETrequest is an external function and not bound to a GlassBox object. This means: you can use it without any GlassBox objects too.

The function was added especially for simple loading external content into Glassbox objects without other libraries. Method of the XMLHttpRequest is GET.

GETrequest ( url, [target_id, [callback_parameter]] )

Example:

XML Source

<?xml version='1.0'?>
<quotes>
   <quote>The bad news is time flies. 
      The good news is you're the pilot. (Michael Althsuler)
   </quote>
   <quote>Time flies like an arrow. 
      Fruit flies like a banana. (Groucho Marx)
   </quote>
</quotes>

XHTML

<div id="quotes"></div>
	
<script>
  GETrequest('getQuotes.php?match=Groucho', 'quotes');
</script>

getQuotes.php (PHP5)

$xmlfile = "quotes.xml";
$match = $_GET['match'];
if (file_exists( $xmlfile )) {
  try {
    $quotes = simplexml_load_file( $xmlfile );
    foreach ($quotes->quote as $quote) {
      if(
        ($match != "" && preg_match("/" . $match . "/i", $quote)) 
          || $match == ""
      ) echo $quote, '<br/><br/>';
    }
  } 
  catch (Exception $e) { /* error */ }
}

Output (live):

An example/demo with callback handler you find [here]. The callback handler in this example sets element styles after successful request/response.

Layout

1. Box content style

With the following two selectors you can edit the style of your GlassBox object:

#contentBoxBg: background style (image, color, alpha/opacity, ..)

#myObj #contentBoxBg {
   background-color: #eeeeee;
   filter: alpha(opacity=80);
   -moz-opacity:.80;
   opacity:.80;
}

#content: content style (font, padding, images, ..)

#myObj #content {
   text-align: left; 
   padding: 10px; 
}

2. Create your own skin (GlassBox border)

There are a few skins in the download zip, but you can create your own box borders.

Create a new skin subdirectory in glassbox/skins like "mySkin" with your own eight border images:

1. bottom.png (1600 x 21 px)
2. bottomleft.png (25 x 21 px)
3. bottomright.png (25 x 21 px)
4. left.png (25 x 1200 px)
5. right.png (25 x 1200 px)
6. top.png (1600 x 21 px)
7. topleft.png (25 x 21 px)
8. topright.png (25 x 21 px)

If you use other image widths and heights, don't forget to change the following variables in glassbox.js:

this.bb_hor = "25px",
this.bb_ver = "21px",

Include your new skin:

myBox.init( 'myBox', '450px', '360px', 'hidden', 'mySkin' );

License

GlassBox is licensed (like script.aculo.us) under the terms of the MIT License.

This means: you can use it, free of charge, for anything you like (which includes commercial applications); just don't remove the copyright remarks.

If you want to contribute or/and use GlassBox in commercial projects, please help Amnesty International to fight against human rights violations and donate now. Thanks.

MIT License:

Copyright (c) 2006-2008 Uli Preuss (http://www.glassbox-js.com)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Download

.. and here you find current versions of the required libraries for the visual effects:

• Prototype JavaScript framework
• script.aculo.us (collection of Web 2.0 style JavaScript libraries)

About

GlassBox author Uli Preuss is a frontend developer and elearning designer living in the North of Germany. GlassBox a non-profit-project - but you can hire me for other projects via: me [at] ulipreuss [dot] eu.

Thanks to Thomas Fuchs, Sam Stephenson and Lokesh Dhakar for their useful libs and inspiration:

script.aculo.us JavaScript libraries (optional - for appear/fade and draggable effects) (c) 2005 Thomas Fuchs http://script.aculo.us

Prototype JavaScript Framework (optional - but necessary for the usage of script.aculo.us) (c) 2005-2007 Sam Stephenson http://prototypejs.org

Lightbox JS (inspiration for glassbox.lbo)
(c) 2005 Lokesh Dhakar http://www.huddletogether.com/projects/lightbox/