Create a notification box using CSS and Javascript.

1

Create a notification box using CSS and Javascript

This tutorial is mainly about creating a notification box using purely CSS and Javascript there is no need for any additional plugins.

Let us consider our Rank analyzer page (http://mycampusnotes.com/GGSIPUBTechRankAnalyzer.aspx), and we want to display a notification box related anything, pertaining any important notification to be displayed. Various steps to be followed.

Our rank analyzer page (as of 30 June 2014)

Our rank analyzer page (as of 30 June 2014)

Various steps included in this tutorial :-

Step 1 : Create an outer div element.
Step 2 : Create another div element to display text.
Step 3 : Write the text inside the #notificationInnerText element.
Step 4 : Create a close button.
Step 5 : The JQuery !


 

Step 1 : Create an outer div element.

Create a div tag of position fixed (so as if the user scrolls down the div tag doesn’t goes up). Following HTML and CSS attributes should be applied.

<div id="notificationOuter">
       
</div>

and the following css properties.

#notificationOuter{
    position:fixed;
    opacity:0.9;
    background-color:black;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:5000; /*make sure that the z index is the highest else it will overlap with the other elements*/
}

Till now the following changes are done

  • The #notificationOuter element containing the text is set ( make sure that the div tag is not nested within another element).
  • The CSS properties are applied on the #notificationOuter element.

and the following output

Create a notification box using CSS and Javascript


Step 2 : Create another div element to display text

Now we have to create another div element to display the box in which text will be displayed. We will name that element as #notificationInnerText. The css and html code for this :-

<div id="notificationInnerText">
 
</div>

 

CSS for this notification box :-

#notificationInnerText {
    position: relative;
    top: 0px; /* The left and top attributes will be set by JQuery  */
    left: 0px;
    height: 200px; /* If you want you can also set height and with by jquery  */
    width: 450px;
    z-index: 5001;
    background-color: white;
    opacity: 1;
}

Till now we have done

  • Set an outerdiv element which will cover up all the screen with position = fixed.
  • Set up an innerdiv element which will takeup the box and set the position = relative.
  • Applied css to both the elements.

This is the output which is being displayed right now (or you must get this output). If not then please recheck the css and html and check whether the ID dependencies are correct or not.

Create a notification box using CSS and Javascript

 


Step 3 : Write the text inside the #notificationInnerText element.

You can use the <p> tag to use text, and it must be placed inside the #notificationInnerText element. The HTML and CSS coding as follows

<div id="notificationInnerText">
            <p id="notificationText"> This is a notification which will be displayed on page load </p>
</div>

 

#notificationText{
    position:relative;
    padding:40px 40px 40px 40px;
    font-family:sans-serif;
    font-size:25px;
    top:30px;
    text-align:center;
}

Till now we have done

  • Set an outerdiv element which will cover up all the screen with position = fixed.
  • Set up an innerdiv element which will takeup the box and set the position = relative.
  • Applied css to both the elements.
  • Wrote the text and wraped it around the p element.

The output till now must be

Create a notification box using CSS and Javascript


Step 4 : Create a close button

This can a bit tricky, you need to create an image and nest it under #notificationInnerText , you will understand it completely via following html and css.

 <div id="notificationInnerText">
            <p id="notificationText">This is a notification which will be displayed on page load </p>
            <img id="cross" src="cross.png" />
 </div>

 

#cross {
    position: absolute;
    top: -25px;
    float: right;
    cursor:pointer;
    left: 420px;
}

 

Till now we have done

  • Set an outerdiv element which will cover up all the screen with position = fixed.
  • Set up an innerdiv element which will takeup the box and set the position = relative.
  • Applied css to both the elements.
  • Created a text and wraped it around <p> tag.
  • Created a cross image and placed it in #notificationInnerText.

The output till now :-

Create a notification box using CSS and Javascript

Thats it for the HTML and CSS coding, now combining all the code we get :-

  <div id="notificationOuter">
 </div>
 <div id="notificationInnerText">
 <p id="notificationText">This is a notification which will be displayed on page load </p>
 <img id="cross" src="cross.png" />
 </div>
#notificationOuter {
 position: fixed;
 opacity: 0.9;
 background-color: black;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 z-index: 5000; /*make sure that the z index is the highest else it will overlap with the other elements*/
}

#notificationInnerText {
 position: relative;
 top: 0px; /* The left and top attributes will be set by JQuery */
 left: 0px;
 height: 200px; /* If you want you can also set height and with by jquery */
 width: 450px;
 z-index: 5001;
 background-color: white;
 opacity: 1;
}

#notificationText {
 position: relative;
 padding: 40px 40px 40px 40px;
 font-family: sans-serif;
 font-size: 25px;
 top: 30px;
 text-align: center;
}

#cross {
 position: absolute;
 top: -25px;
 float: right;
 cursor:pointer;
 left: 420px;
}

Step 5 : The JQuery !

Before proceeding anyfurther make sure that you have included the jquery in head tag , if not then you can use the following code

// use any one of the code

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>

 

This might be the most important part of the article. All the animation will be done via jquery, we will use the fadeIn and fadeOut property of jquery. For that we must set the display property of the #notificationOuter ,#notificationInnerText to none, and must fadeIn the when $(document).ready() functionality is called. The complete step by step process of jquery :-

function centerTheDiv() {
    //function to center the DIV
    var winH = $(window).height();
    var winW = $(window).width();
    var dialog = $('#notificationInnerText');
    var maxheight = dialog.css("height");
    var maxwidth = dialog.css("width");
    if (maxheight != "none") {
        dialogheight = Number(maxheight.replace("px", ""));
    }
    if (maxwidth != "none") {
        dialogwidth = Number(maxwidth.replace("px", ""));
    }
    dialog.css('top', winH / 2 - dialogheight / 2);
    dialog.css('left', winW / 2 - dialogwidth / 2);
}

The current output :-

Create a notification box using CSS and Javascript

(but before that we must set display to none ) the updated css is

#notificationOuter {
    display: none;
    position: fixed;
    opacity: 0.9;
    background-color: black;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 5000; /*make sure that the z index is the highest else it will overlap with the other elements*/
}

#notificationInnerText {
    display: none;
    position: relative;
    top: 0px; /* The left and top attributes will be set by JQuery  */
    left: 0px;
    height: 200px; /* If you want you can also set height and with by jquery  */
    width: 450px;
    z-index: 5001;
    background-color: white;
    opacity: 1;
}

#notificationText {
    position: relative;
    padding: 40px 40px 40px 40px;
    font-family: sans-serif;
    font-size: 25px;
    top: 30px;
    text-align: center;
}

#cross {
    display: none;
    position: absolute;
    top: -25px;
    float: right;
    cursor: pointer;
    left: 420px;
}

Now its just left to show and hide the div

function notify() {
    var notifications = $('#notificationOuter, #notificationInnerText, #cross');
   notifications.fadeIn("1000");
    $('#cross').click(function () {
        notifications.fadeOut("1000");
    })
}

the complete jquery

$(document).ready(function () {
    centerTheDiv();
    notify();
});


function centerTheDiv() {
    var winH = $(window).height();
    var winW = $(window).width();
    var dialog = $('#notificationInnerText');
    var maxheight = dialog.css("height");
    var maxwidth = dialog.css("width");
    if (maxheight != "none") {
        dialogheight = Number(maxheight.replace("px", ""));
    }
    if (maxwidth != "none") {
        dialogwidth = Number(maxwidth.replace("px", ""));
    }
    dialog.css('top', winH / 2 - dialogheight / 2);
    dialog.css('left', winW / 2 - dialogwidth / 2);
}

function notify() {
    var notifications = $('#notificationOuter, #notificationInnerText, #cross');
   notifications.fadeIn("1000");
    $('#cross').click(function () {
        notifications.fadeOut("1000");
    })
}

 

  • Set an outerdiv element which will cover up all the screen with position = fixed.
  • Set up an innerdiv element which will takeup the box and set the position = relative.
  • Applied css to both the elements.
  • Created a text and wraped it around <p> tag.
  • Created a cross image and placed it in #notificationInnerText.
  • Centered the complete div element using JQuery.
  • FadeIn and FadeOut the div elements.
  • The live example of this feature can be seen here : http://divineinstitute.mycampusnotes.com/ (see the notification box).

Thats all for the notification box using jquery , if any errors, bugs suggestion you can post it in comments section. You can also share on your social networks if you liked the post.

 

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge