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.

styles.css - Part 1

/* The bouncing box */

#box{
    background:url('img/box_bg.jpg') repeat-x center top #fcfcfc;
    height:115px;
    padding:20px;
    margin-top:-10px;
    padding-top:30px;
    width:400px;
    border:1px solid #fcfcfc;
    color:#494848;
    text-shadow:1px 1px 0 white;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}

#box p{
    font-size:25px;
    background:url('img/warning.png') no-repeat 10px center;
    padding-left:90px;
}

#box p b{
    font-size:52px;
    display:block;
}

#box,
#main,
a.button{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

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.

styles.css - Part 2

/* Styling the big button */

a.button{
    color:white;
    letter-spacing:-2px;
    padding:20px;
    display:block;
    text-shadow:1px 1px 0 #145982;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
    font-size:80px;
    font-weight:bold;
    text-align:center;
    width:350px;
    border:1px solid #60b4e5;

    margin:60px auto;

    /*
        CSS3 gradients for webkit and mozilla browsers,
        fallback color for the rest:
    */

    background-color: #59aada;
    background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

a.button:hover{
    /* Lighter gradients for the hover effect */
    text-decoration:none;
    background-color: #5eb2e2;
    background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}

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.

bouncebox-plugin/jquery.bouncebox.1.0.js

(function($){

    /* The plugin extends the jQuery Core with four methods */

    /* Converting an element into a bounce box: */
    $.fn.bounceBox = function(){

        /*
            Applying some CSS rules that center the
            element in the middle of the page and
            move it above the view area of the browser.
        */

        this.css({
            top     : -this.outerHeight(),
            marginLeft  : -this.outerWidth()/2,
            position    : 'fixed',
            left        : '50%'
        });

        return this;
    }

    /* The boxShow method */
    $.fn.bounceBoxShow = function(){

        /* Starting a downward animation */

        this.stop().animate({top:0},{easing:'easeOutBounce'});
        this.data('bounceShown',true);
        return this;
    }

    /* The boxHide method */
    $.fn.bounceBoxHide = function(){

        /* Starting an upward animation */

        this.stop().animate({top:-this.outerHeight()});
        this.data('bounceShown',false);
        return this;
    }

    /* And the boxToggle method */
    $.fn.bounceBoxToggle = function(){

        /*
            Show or hide the bounceBox depending
            on the 'bounceShown' data variable
        */

        if(this.data('bounceShown'))
            this.bounceBoxHide();
        else
            this.bounceBoxShow();

        return this;
    }

})(jQuery);

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.

script.js

$(document).ready(function(){

    /* Converting the #box div into a bounceBox: */
    $('#box').bounceBox();

    /* Listening for the click event and toggling the box: */
    $('a.button').click(function(e){

        $('#box').bounceBoxToggle();
        e.preventDefault();
    });

    /* When the box is clicked, hide it: */
    $('#box').click(function(){
        $('#box').bounceBoxHide();
    });
});

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.