Windows 8 Metro UI For Websites:Toast Notifications

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

1. $(document).ready(function(){

2.     var ranId=0;

3.     $('#btn').click(function(){

4.         var notif=document.createElement("div");

5.         notif.setAttribute("class","notif-box");

6.         ranId+=1;

7.         notif.setAttribute("id","n"+ranId);

8.         document.body.appendChild(notif);

9.         $("#n"+ranId).toggle("slide",{direction:'right'},1000);

10.         $("#n"+ranId).delay(5000).hide("slide",{direction:"left"},1000); 

11.      });

12.  

13.     $("body").on("click","[id^=n]",function(){

14.        $(this).remove();

15.     });

16. });

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.