To show the notification bar at top of the page in jQuery we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Notification Bar At Top of Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btnClose").click(function (evt) {
$("#notfiydiv").slideUp('slow');
});
$("#hrefshownotfify").click(function (evt) {
$("#notfiydiv").slideDown('slow');
});
});
</script>
<style type="text/css">
.notifybar
{
background-color: #EB5E00;
color: white;
font-weight: bold;
position: absolute;
width: 100%;
top: 0px;
left: 0px;
text-align: center;
border-bottom-width: 2px;
border-bottom-color: #666666;
border-bottom-style: solid;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="notfiydiv" class="notifybar">
<label>jQuery Notification Bar on Top of the Page</label>
<br />
<input type="button" id="btnClose" value="Close" />
</div>
<div style="margin-left:50%">
<a href="" id="hrefshownotfify">Show Notification Bar</a>
</div>
</body>
</html>
|
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.