Windows 8 Metro UI For Websites: Full Screen Notifications

 

Introduction

In this article I'm going to cover another important aspect of Windows 8 Metro UI and that is full screen notifications or alerts. Have you noticed it? The strip comes in the middle of your screen when an error happens in the window. We will create the same for our website. So let's start! (From now onwards I'll be using notification, full screen notification and alert box interchangeably. They all refer to full screen notification.)

Analyzing Windows 8 alert box

Whenever any error or serious action occurs in the OS or an app that requires user interference then we get this full screen alert notification. It is different from toast notifications that comes on the right side of the window. Some points about full screen notifications are:

1. Some buttons are required on that notification to which the user can respond.
2. The notification is full width but not full height.
3. The notification should be at the top of the screen.
4. The background is faded when the notification occurs.
5. The background becomes active again on the close of the notification.

Logic for full screen notifications

1. We need to fade our entire website when notification occurs.
2. We need to bring in our notification on top of the site.
3. The user should not be allowed to interact with the website until a notification is closed.
4. Animation can be done using the fading effect of jQuery.
5. The base of the notification can be created using a "div" tag.
6. To avoid website interaction while the notification is overlayed on the website something can be added.

Let's now start coding this alert scheme.

Coding the Windows 8 full screen notification

HTML

1.   <divid="overlay"></div>

2.   <divid="alertBox">

3.     <divid="btnctr">

4.     <inputtype="button"id="btn1"value="OK"/>

5.     <inputtype="button"id="btn2"value="CANCEL"/>

6.     </div>

7.   </div>

Div with id="overlay" represents an overlay div that will cover the entire website.

Div with id="alertBox" represents the full screen notification.

Div with id="btnctr" inside "alertBox" div is a container for the buttons of the notification.

 

CSS

1. body{

2.   margin:0px;

3. }

4. #overlay{

5.   background-image:url("http://www.hdwallpapers.in/walls/windows_8_official-wide.jpg");

6.   background-size:contain;

7. }

8.  

9. #alertBox{

10.   display:none;

11.   background-color:#008a00;

12.   width:100%;

13.   height:30%;

14.   top:40%;

15.   position:absolute;

16.    overflow: hidden;

17. }

18.  

19. #btnctr{

20.   width: 305px;

21.   overflow: hidden;

22.   margin:140px 0px 0px 500px;

23. }

24.  

25. #btn1{

26.   width:100px;

27.   height:35px;

28.   margin-right:100px;

29. }

30. #btn2{

31.   width:100px;

32.   height:35px;

33. }

Line numbers 5-6 sets the background image of the overlay and its attachment type.

Line numbers 10-16 are responsible for the notification design.

Line number 10 hides the notification initially. We will change this property from jQuery.

Line numbers 20-22 design the button container inside the notification.

Line numbers 26-28 and 31-32 design the buttons of the notification.

 

jQuery

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

2.  

3.  //Initilization

4.  

5.   $("#overlay").css("width",$(window).width()+"px");      

6.  $("#overlay").css("height",$(window).height()+"px");

7.   $("#alertBox").css("width",$(window).width()+"px");      

8.  

9.  //Activate

10.  

11.   $("#overlay").click(function(){

12.       $("#overlay").fadeTo(500,0.5);

13.     $("#alertBox").fadeIn(500);

14.   });

15.   $("#btn1").click(function(){

16.        $("#overlay").fadeTo(500,1);

17.     $("#alertBox").fadeOut(500);

18.   });

19.  

20. });

Line numbers 5, 6 and 7 initialize the size of the overlay and the notification as per the user screen.

Line number 11 triggers the notification whenever a click on the overlay is done. In practice this must be triggered by a button or some event on website data or from a user action.

Line number 12 fades the current active app (let it be an overlay) to 0.5 opacity in 500 milliseconds using the "fadeTo" function.

Line number 13 brings the notification on top of the website using a fade effect.

From now onwards the user can proceed ahead only by giving a response to the notification.

Line number 15 binds a click event with notification button 1 ("OK").

On the click of the "ok" button, line number 16 activates the Desktop and line number 17 hides the alert box.

In the preceding example I don't have an explicit Desktop so I treated the overlay as the Desktop but the code can be adjusted to accommodate this change in practical situation.

Output

LIVE OUTPUT

 

 

 

 

Summary

That's all for this article. If you have any suggestion regarding it's improvement then do share with me your comments. In the case of any doubt feel free to ask in the comments. Thank you for reading this article.