Código na unha

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:
In our example the title of the message, the message body, and the warning icon are all created by using a single
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

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

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

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

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.





Postado por Fernando Schimit - Fox Creative