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.
<!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>
Application of the article:
- If you want to give special notice on website then you can use it.
- 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>