Search

Friday, July 15, 2016
0 comments

JQuery Notification bar on top of the page

2:16 AMFriday, July 15, 2016
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>

Protected by Copyscape Online Copyright Protection Software
Next
This is the most recent post.
Older Post

0 comments :

Post a Comment

 
Toggle Footer
Top