Tag Archives: script

‘BounceBox’ Mootools Effects Class

I sat down to further my Javascript skills a couple of weeks ago and re-wrote a small peice of code that I used on DreamCatcher, A School Careers Application to create ‘Slide Down’ boxes for the Contact Form, Login Form and an Introduction Movie.

I rewrote it using less code and working out heights and sizes more dynamically, but yesterday I decided that I wanted to write a Mootools Javascript Class, something I have never attempted. So here is the first version 1.0. A simple Javascript class for Mootools 1.2+ to display a sliding box with a nice tranisiton 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.

I have tested it, and works on;

Safari ( Mac & Win )
FireFox 3 ( Mac & Win )
IE 6 & 7

This is a free Release and I welcome any and all bugs and suggestions.

Now Version 1.2

View the Example at http://bouncebox.lendrum.co.nz or Download;

Version 1.2 [download id="10"]
Version 1.1 [download#8]
Version 1.0 [download#7]

BouceBox Preview

BouceBox Preview