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 ..
- is easy to use, 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 distributed under MIT license
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
2. Flashnotice examples:
- Flashnotice
- Flashnotice (skin greyline)
- Flashnotice (skin facebookstyle)
- Flashnotice with effects (autostart)
- Flashnotice with effects and ajax (autostart)
- Flashnotice with effects (Start onclick)
3. Lightbox examples:
4. Website examples:
- Tree columns (skin default)
- Tree columns / Single Source Publishing (skin greyline)
- Single Source Publishing (this application).
New: history manager for using back button.
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:
- '#myObj #contentBoxBg' to '#myObj_contentBoxBg'
- '#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, ..)
#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:
- default
- noline
- white
- greyline (NEW)
- facebookstyle (NEW)
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:
- bottom.png (1600 x 21 px)
- bottomleft.png (25 x 21 px)
- bottomright.png (25 x 21 px)
- left.png (25 x 1200 px)
- right.png (25 x 1200 px)
- top.png (1600 x 21 px)
- topleft.png (25 x 21 px)
- 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::
- 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. 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:
- 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/ - Codesnippet for 'Reading Style Values' (c) by Garrett Smith http://dhtmlkitchen.com
- Codesnippet for 'IE getComputedStyle Method for Block Elements' (c) by Matt Murphy http://www.matts411.com
- Codesnippet for 'historyManager' (not used in glassbox.js - but used for this page) (c) by Kai Jäger http://ajax-in-der-praxis.de/
Thanks!