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>

Comments

Popular posts from this blog

difference between structure and union in C Language

Difference between Linear search and Binary Search in c language

Difference between static and dynamic websites