![]()
Introduction
This article demonstrates the Windows 8 notification scheme for a website.
After reading this article you will be able to show the windows 8 style
notifications on your website. Basically I'm creating a simple notification
scheme for a website that looks very similar to windows 8 notifications. Before
creating the website version of notifications, let's first analyze the
actual notification scheme of windows 8. So let's start.
Analysis of Windows 8 notifications
Whenever we attach any device to our computer system we get notifications on
right side of the screens.
These notifications consist of device name and other details.
On clicking that notification we can choose the appropriate action for that
device.
After receiving the response from user notification is removed from screen.
After some specific time if user didn't click on notification then also it is
removed from screen.
When notification come it opens with an animation. On closely examined I
found that this effect looks very similar to sliding effect.
When notification is closed, It closes with an animation. The animation is
similar to fading effect.
This is what I observed in windows 8 notification system. Now considering
these observations let's make our requirements for our website notification
system.
Notification requirements
Notifications can be raised by any event of website.
Notifications should be closed automatically after some time.
Notifications should respond to the user events.
Notifications should be open/close with sliding animation.
Coding Windows 8
notification system
HTML
<div
class="notif-box"></div>
<input
type="button"
id='btn'
value="Create
Notification">
Div with class="notif-box" is
responsible for holding all the notification generated by the website. This div
will be populated by sub div's generated from jQuery.
Input element is just a stub
for generating dummy notifications.
CSS
.notif-box{
display:none;
position:relative;
width:300px;
height:75px;
background-color:#008A00;
margin-left:78%;
margin-top:5px;
}
This CSS is responsible for
notification design. You may design it in whatever way you want. One important
thing to note here is display property must be "none".
jQuery
-
$(document).ready(function(){
-
var ranId=0;
-
$('#btn').click(function(){
-
var
notif=document.createElement("div");
-
notif.setAttribute("class","notif-box");
-
ranId+=1;
-
notif.setAttribute("id","n"+ranId);
-
document.body.appendChild(notif);
-
$("#n"+ranId).toggle("slide",{direction:'right'},1000);
-
$("#n"+ranId).delay(5000).hide("slide",{direction:"left"},1000);
-
});
-
-
$("body").on("click","[id^=n]",function(){
-
$(this).remove();
-
});
-
});
Line no. 2 declares and defines
a "ranId" variable. This variable maintains a notification no. Each time when
new notification is generated, This ranId is incremented by one.
Line no. 4 creates a new "div"
element and assign it to notif variable.
Line no. 5 sets the class of
the newly created div to "notif-box".
Line no. 6 increments the ranId
by one.
Line no. 7 sets the ID of newly
created div to "n" +ranId. Ex. n1,n2,n3...
Line no. 8 append that newly
created notification to the DOM or HTML body.
Line no. 9 brings in the newly
created notification with slide effect. Direction of slide is set to left and
duration is 1second or 1000 millisecond.
Line no. 10 delays the hiding
or removal of the notification for 5 seconds. After time elapses notification is
removed with sliding effect.
Line no. 13 binds the click
event on body. Here all dynamic notifications are handled using event bubbling
technique. Here ordinary click event binding won't work because elements are
added dynamically.
Line no. 14 simply removes the
notification clicked.
Output
LIVE OUTPUT
![]()
![]()
![]()
![]()
Summary
That's all for now. I hope you
have enjoyed reading this article. Feel free to ask any query in comments. Don't
forget to share and like this article.