GlassBox

Don't panic! It's not magic.
It's only a simple solution to create another kind of boxes.

GlassBox is a lightweight JavaScript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and "Flash-like" effects. The GlassBox library ..

See News about the new Version 2.0.0!


Keyboard navigation: Keys 1-9 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

It has finally been done! Version 2 is online.


I got a lot of feedback for this project during the past year. Thanks to all for reporting bugs and sending suggestions. All your impact went into a new Version: Version 2.0.0.

.. and what's new or changed?

1.Through versions 1.x.x you can't destroy glassbox objects. Since this is important to create/destroy boxes via link-tag, it's been fixed now. Please see example for details.

2. Previous versions had Ids like 'content' and 'contentBoxBg' for each element. What a shame! Please see Layout for necessary changes in your stylesheets.

3. You may now use height:auto. The box resizes to the height of the content (except 'vscreen'). See example.

4. The IE 7 PNG bug is fixed (not tested in IE8).

5. New is a simple helper function 'Dollar' ($ - shortcut for document.getElementById).


I've tried to change the code as cautious as possible, but please test your application, if you migrate from major version 1 to 2.





Quick start

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>

or use the minified version:

<script src="glassbox/glassbox-min.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>


Ajax GETrequest


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

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]] )

Parameter:
url required string Request Url
target_id optional string Id of the Element in which the returned data should be loaded
callback_parameter optional any kind of datatype Parameter for the user defined 'GETrequest_callbackHandler'

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>
  var GETrequest_callbackHandler = function(msg) {
  	alert(msg);
  }
  GETrequest('getQuotes.php?match=Groucho', 'quotes', 'Hello');
</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):


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



Background images and file size


An adequate background is essential for the visual effect of a GlassBox object. This demo website uses eight big JPEG images (1600x1200 pixel) - for each 'page' one. This results in 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 (CO2) emissions and resource consumption). Bad!

To avoid this, simply use GlassBox as a 'Lightbox' or 'Flashnotice' tool (typically no need to use special background images). The size of the 'light' package (compressed script and default skin images) results in a weight 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!





Examples


1. Basic example

2. Flashnotice examples:

3. Lightbox examples:

4. Website examples:



API Documentation


Create and initialize a glassbox object

init (id, width, height, overflow [, borderskin [, resize [, dblclick ]]])

Parameter:
id required string Element Id
width required string GlassBox width (CSS values: px, em, ..)
height required string GlassBox height (CSS values: px, em, ..)
overflow required string Scrollbars box content (CSS values: auto, hidden, ..)
borderskin optional string Border image set (default, white, noborder)
resize optional bool Center GlassBox on resize event (Default: false)
dblclick optional bool Fade/hide GlassBox on double click event (Default: false)

Example:

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

Four different ways to display a glassbox object

1. Display object inline

ipos ()

Example:

myGlassBox.ipos();

2. Display object with an absolute position

apos ( left, top )

Parameter:
left required string Absolute position left (CSS values: px, em, ..)
top required string Absolute position top (CSS values: px, em, ..)

Example:

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

3. Display object in full vertical position

vscreen ( left, margin )

Parameter:
left required string Absolute position left (CSS values: px, em, ..)
margin required string Glassbox margin (CSS values: px, em, ..)

Example:

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

4. Display object as a lightbox with overlay

lbo ( [exitbutton, [opacity_overlay]] )

Parameter:
exitbutton optional bool Lightbox exit button (true, false) Default: false
opacity_overlay optional float Lightbox overlay opacity

Example:

myGlassBox.lbo( true, 0.50 );

Visual Effects

script.aculo.us appear effect

appear ( duration )

Parameter:
duration optional integer Shows a GlassBox only for a period of time (Milliseconds)

Note: appear (without duration) is called by default - if script.aculo.us is included.

Example:

myGlassBox.appear(3000);

script.aculo.us draggable effect

draggable ()

Parameter:
text required string Text for the title attibute

Example:

myGlassBox.draggable('You can drag me!');
myGlassBox.draggable('');

Miscellaneous

z-index of a Glassbox object

zindex (zindex)

Parameter:
zindex required string Sets the GlassBox z-index

Example:

myGlassBox.zindex('100');

Helper

Shortcut for document.getElementById(id)

$ (id)

Parameter:
id required string Id of the element

Example:

$('elementId').focus();

Note: Function checks if another 'Dollar function' (like in prototype.js) was defined.

Simple Ajax request

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

Parameter:
url required string Request Url
target_id optional string Id of the Element in which the returned data should be loaded
callback_parameter optional any kind of datatype Parameter for the user defined 'GETrequest_callbackHandler'

Example: See Usage





Layout

Notice: If you update the glassbox.js in an existing application from version 1.x to 2.x - please change this in your CSS:

  1. '#myObj #contentBoxBg' to '#myObj_contentBoxBg'
  2. '#myObj #content' to '#myObj_content'

1. Box content style

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

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

glassbox boxmodel 
#myObj_contentBoxBg {
   background-color: #eeeeee;
   filter: alpha(opacity=80);
   -moz-opacity:.80;
   opacity:.80;
}

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

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


2. Skins (GlassBox border)

You can use different skins for your application:

Usage:

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


3. Create your own skin (GlassBox border)

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 dimensions than the given ones, don't forget to insert the width and height of your skin border (eg. "15px" and "20px") in the following variables in glassbox.js:


this.bb_hor = "",
this.bb_ver = "",

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-2009 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



.. get the latest versions of the required libraries for the visual effects here::



About

GlassBox author Uli Preuss is a frontend developer and elearning designer living in the North of Germany. Please report all bugs, questions, suggestions or any other feedback to dev [at] glassbox-js [dot] com. GlassBox a non-profit-project - but you can hire me for other projects via: me [at] ulipreuss [dot] eu.

Libraries, codesnippets and inspiration:

Thanks!