JQuery Notification bar on top of the page

JQuery Notification bar on Top of the web page. This is the new thing in the mind i.e when we click on hyperlink then show a division with some message on top of the web page. The logic behind the thing is too much simple, In JQuery we have two method slideUp( ) and slideDown( ) , which are used for animation.  In this article , i have used both.

Application of the article:

  1. If you want to give special notice on website then you can use it.
  2. Use it in Current News Section.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery: Notification bar Example </title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $("#Button1").click(function () {
                $("#NotificationDiv").slideUp('slow');
            });


            $("#ShowNotificationBar").click(function () {
                $("#NotificationDiv").slideDown('slow');
            });



        });
    </script>
    <style>
.NotficationBar{
    background-color:blue;
    color:white;
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    text-align:center;
    border-bottom-width:3px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    padding:15px;
}



    </style>
</head>
<body>
    <div id="NotificationDiv" class="NotficationBar">
        <label>Welcome to dotprogramming.blogspot.com</label>
        <br/>
        <input type="button" id="Button1" value="close"/>
            </div>
    <div>
        <a href="" id="ShowNotificationBar">Show Notification Bar </a>
    </div>
</body>
</html>

JQuery Notification bar on top of the page JQuery Notification bar on top of the page Reviewed by Jacob Lefore on July 15, 2016 Rating: 5

No comments