BounceBox Notification Plugin With jQuery & CSS3

Earlier this week, while working on ZineScripts' coupon code system, I found the need to be able to dynamically create and present a message box to Zine's visitors. The usual routine would include digging through jQuery's plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today.

Step 1 - XHTML

Going straight to the point, what do you need to create this effect?

The only thing you need is to create a div on your page and put some content inside it. Something like this:

<div id="box">
<p><b>Title!</b>Boring explanation.</p>
</div>

In our example the title of the message, the message body, and the warning icon are all created by using a single <p> tag with some CSS wizardry. The warning icon is its background, and the title is a regular bold tag contained inside the paragraph.

Step 2 - CSS

The plugin, we are doing today, adds its own CSS rules for the box positioning, which make the bounce effect possible, but we still need to code the design of the box in our stylesheet file.

Here we are styling the design of the bounceBox. There are also a couple of rules that are applied inline by jQuery, which assign a 'fixed' positioning to the box and center it in the middle of the page, which is required for the animation. This way there is a clear division between the styles for design and those for functionality.

In the second part of the code we apply a number of CSS3 rules to the button to achieve that polished look. Notice the two gradient rules which are targeted at Mozilla Firefox and the Webkit browsers (Safari & Chrome). Unfortunately, unlike with other CSS3 rules, they don't share a common syntax for displaying a gradient, which raises the burden on the developer in some degree.

It is also important to specify a fallback background color in case the browser does not support CSS gradients.

Step 3 - jQuery

First lets start by creating our bounceBox plugin. As we've seen before, creating a jQuery plugin is just a matter of extending the $.fn object with a new function. The 'this' of the new function is equivalent to the jQuery set of elements that the method was called on.

We are defining four separate methods which convert the div to a bounceBox (and apply the positioning CSS rules), show it, hide it or toggle between the two by using the animate() jQuery method.

For the toggling we are keeping an internal variable with the data method, which marks whether the box has been shown or hidden.

All of these methods are available to you after you include the jQuery library and the jquery.bounce.1.0.js files to the page. For the neat bounce effect, you will need the jQuery easing plugin as well, which is included in the plugin directory in the zip.

It is really easy to use the plugin, as you can see from the code below.

The code above is executed when the document ready event is fired so we are sure that all the page elements are available to jQuery. The first thing we then do is to covert the #box div to a bounceBox, and bind listeners to the click event on the button and the box itself.

You can put whatever HTML code you want in the box div and it will be properly converted to a bounceBox. You can also have more than one bounce box on the page in the same time.

With this our BounceBox plugin is complete!

Conclusion

You can use this jQuery plugin to present notifications to the user in an eye-catching manner. You can easily put a registration form, newsletter signup or even some kind of advertisement as the content of the box div. Feel free to experiment and share what you've done in the comment section.

This is a nice little function which can be used for numerous things.
A little tweaking and it could be used as an auto-dropdown notice on forums or community sites telling people what possibilities they get if they sign up.
It can be used to show error messages on forms if a person forgot to fill out some form fields.

Yet another great and useful tutorial.
Thanks for your great work Martin ^_^

It's recommended that jQuery plugins take up a single function in the jQuery namespace, and that access to "internal methods" be provided, well...internally, via passing arguments to that one public function, rather than adding four separate functions to jQuery to manipulate the state of your plugin.

I have a question about this script, it's kewl by the way; how does one use it with multiple links? That is to say link one bounces content in id=box, link two bounces content in id=box2; or maybe they should be set by classes?

For example, one may wish to use it for a FAQ, whereby clicking on a particular question bounces a short answer - with a link to the FAQ page with more details. I can't figure out how to have it work with multiple ID's though.