Facebook-style Notification Alert Box

facebook-notification-alert-box
Use jQuery and CSS to create a facebook-style notification alert box.
DemoDownload

Facebook uses a notification box to alert you of notifications. Today we will be recreating the notification alert box using CSS and jQuery. The icon fonts that we will be using today are from icomoon.com.

Using a notification alert box on your website can be a great feature to add.

The Javascript

When the notification alert box is opened, we set a 5 second timer using the setTimeout method. After 5 seconds, the notification box will close unless the box has a mouse enter it. We then pause the timer until the mouse moves off the box – then we restart the timer and close the box after 5 seconds.

Assign our timer value to the timer variable and declare the timeoutId variable.

Set the selector variable for the .rrpowered_noti class.

Call the showAlert() and startTimer() functions when the notification alert box is opened.

Next is the showAlert() function to show the .rrpowered_noti div.

The startTimer() function sets the time out to hide the notification alert box. Note: you can change the hide() method to fadeOut() or use the .animate() method instead.

The stopTimer() function stops the setTimeout() method.

Upon the mouse entering the .rrpowered_noti div, we call the stopTimer() function to stop the timer we set to close the div after 5 seconds. Upon the mouse leaving the div, call the stopTimer() function to start the timer again.

Now for the close button. As mentioned earlier, you do not need to use the hide() method.

Here is the final javascript.

The Markup

Here is the markup for our notification file.

The notification structure used in our javascript to display the notification alert box.

The CSS

Now we will add the style.

And that’s all there is to it! I hope you enjoyed this tutorial and find it useful!

Barrett

DemoDownload

Tagged with:

View all contributions by

Website: http://rrpowered.com

Related Articles

Advertisement

Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates

FEEDBACK0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">