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.
|
1 |
var timer = 5000, timeoutId; |
Set the selector variable for the .rrpowered_noti class.
|
1 |
var notiAlert = $(".rrpowered_noti"); |
Call the showAlert() and startTimer() functions when the notification alert box is opened.
|
1 2 |
showAlert(); startTimer(); |
Next is the showAlert() function to show the .rrpowered_noti div.
|
1 2 3 |
function showAlert() { $(".rrpowered_notification").html('<div class="rrpowered_noti noti_clearfix"><div class="rrpowered_noti_image noti_left"></div><div class="rrpowered_noti_content noti_left"> <p><b>Jane Doe</b> commented on your post: "Nice work"</p><span class="rrpowered_noti_time"><i class="icon_comment"></i> a few seconds ago</span></div><div class="icon_close noti_right" id="close"></div></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.
|
1 2 3 4 5 |
function startTimer() { timeoutId = setTimeout(function() { $(".rrpowered_noti").hide(); }, timer); } |
The stopTimer() function stops the setTimeout() method.
|
1 2 3 |
function stopTimer() { clearTimeout(timeoutId); } |
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.
|
1 |
$(".rrpowered_noti").mouseenter(stopTimer).mouseleave(startTimer); |
Now for the close button. As mentioned earlier, you do not need to use the hide() method.
|
1 2 3 |
$("#close").click(function() { $(".rrpowered_noti").hide(); }); |
Here is the final javascript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
$(function() { $(".open").click(function() { /*Set the timeout timer, 5000 milliseconds equals 5 seconds*/ var timer = 5000, timeoutId; /*Set the selector for the notification alert box*/ var notiAlert = $(".rrpowered_noti"); /*Call the function to show the notification alert box*/ showAlert(); /*Call the function to start the timer to close the notification alert box*/ startTimer(); /*The function to show notification alert box*/ function showAlert() { $(".rrpowered_notification").html('<div class="rrpowered_noti noti_clearfix"><div class="rrpowered_noti_image noti_left"></div><div class="rrpowered_noti_content noti_left"> <p><b>Jane Doe</b> commented on your post: "Nice work"</p><span class="rrpowered_noti_time"><i class="icon_comment"></i> a few seconds ago</span></div><div class="icon_close noti_right" id="close"></div></div>'); } /*The function to start the timeout timer*/ function startTimer() { timeoutId = setTimeout(function() { $(".rrpowered_noti").hide(); }, timer); } /*The function to stop the timeout timer*/ function stopTimer() { clearTimeout(timeoutId); } /*Call the stopTimer function on mouse enter and call the startTimer function on mouse leave*/ $(".rrpowered_noti").mouseenter(stopTimer).mouseleave(startTimer); /*Close the notification alert box when close button is clicked*/ $("#close").click(function() { $(".rrpowered_noti").hide(); }); }); }); |
The Markup
Here is the markup for our notification file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Facebook Notification Alert | RRPowered</title> <link rel="stylesheet" type="text/css" href="css/rrpowered_notification_script.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="script/rrpowered_notification_script.js" type="text/javascript"></script> </head> <body> <a href="#" class="open">Open Notification Alert</a> <div class="rrpowered_notification"></div> </body> </html> |
The notification structure used in our javascript to display the notification alert box.
|
1 2 3 4 5 6 7 8 9 |
<div class="rrpowered_noti noti_clearfix"> <div class="rrpowered_noti_image noti_left"></div> <div class="rrpowered_noti_content noti_left"> <p> <b>Jane Doe</b> commented on your post: "Nice work" </p> <span class="rrpowered_noti_time"><i class="icon_comment"></i> a few seconds ago</span> </div><div class="icon_close noti_right" id="close"></div> </div> |
The CSS
Now we will add the style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
/*Use icomoon for our icon fonts*/ @font-face { font-family: 'rrpowered_noti'; src:url('../font/rrpowered_noti.eot?-2e24ql'); src:url('..font/rrpowered_noti.eot?#iefix-2e24ql') format('embedded-opentype'), url('../font/rrpowered_noti.woff?-2e24ql') format('woff'), url('../font/rrpowered_noti.ttf?-2e24ql') format('truetype'), url('../font/rrpowered_noti.svg?-2e24ql#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon_"], [class*="icon_"] { font-family: 'rrpowered_noti'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*The comment icon*/ .icon_comment:before { content: "e608"; width: 16px; height: 16px; margin: 0 0 5px 0; padding: 2px; background-color: #8cab72; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; color: #fff; } /*The close icon*/ .icon_close:before { content: "e609"; font-size: 16px; color: #999; } /*The close icon hover*/ .icon_close:hover:before { content: "e609"; color: #777; } /*Notification alert box*/ .rrpowered_noti { width: 245px; margin: 50px; padding: 10px; position: absolute; bottom: 0; z-index: 99; background-color: #fff; line-height: 1.3em; color: #666; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.35); -moz-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.35); box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.35); } /*Notification alert box hover*/ .rrpowered_noti:hover { -webkit-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.50); -moz-box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.50); box-shadow: 0px 0px 5px 1px rgba(50, 50, 50, 0.50); cursor: pointer; } /*Clearfix for clearing floats*/ .noti_clearfix:before, .noti_clearfix:after { content: ''; display: table; } /*Clearfix for clearing floats*/ .noti_clearfix:after { clear: both; content: "."; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden; } /*Float left*/ .noti_left { float: left; } /*Float right*/ .noti_right { float: right; } /*Thumbnail image*/ .rrpowered_noti_image { width: 30px; height: 30px; background-image: url('../images/thumb.jpg'); } /*Notification alert box content*/ .rrpowered_noti_content p { width: 150px; margin: 0; padding: 0 5px 10px 5px; } /*Ago text*/ .rrpowered_noti_time { color: #999; } /*Notification alert box close button*/ .rrpowered_noti_close { width: 16px; height: 16px; } |
And that’s all there is to it! I hope you enjoyed this tutorial and find it useful!
DemoDownload
FEEDBACK0