version 1.2 - 26/10/2010

A simple JS class to display a sliding box with a nice transition and with/out an overlay layer.

This Class requires no CSS styles other that cosmetic formatting, and can be called via DOM READY or an Event. If the BounceBox is open, then your ESC key will close the BounceBox.

Click the DEMO Image to preview the example. and you can Download the code below.

Change Log

Usage

<script src="assets/js/mootools-1-1.2.1-core.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/bounceBox-1-1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

window.addEvent('domready', function(){
		
var mybouncebox = new bounceBox({
				showOnLoad: false,          // show BounceBox on DOM READY
				overlay: false,             // Show overlay with BounceBox
				position: 0,                // INT height of box or 'center'
				containerId: 'drop_down',   // BounceBox Container ID
				actionId: 'show_drop',      // Action Trigger ID
				closeId: 'drop_close',      // Action Close ID
				opacity: .8,                // Overlay Opacity
				colour: '#222222',          // Overlay Colour
				transition: 'bounce:out',   // BoucneBox Transitions
				duration: 2500              // BoucneBox Transition Speed
});

$('demo-link').addEvent('click', function() {
				// call bouncebox via a onClick Event
				mybouncebox.displayBounceBox();
});

});
</script>

Mootools BounceBox Class

This Class uses Mootools 1.3.0 Base Core but should downgrade to and 1.2 version that supports the 'document.id(element)' selector over the original '$(element)' selector.

BounceBox Code

This code is free to use, if you have any questions post them on my Blog: http://sheldon.lendrum.co.nz, Try the version 1.2 Demo that will center the BounceBox on your screen where you are scrolled to !