jQuery Show Notification Bar on Top of The Page

In This Tutorial I am going to explain how to use jQuery to show notification bar on top of the page with good example or jQuery show notification bar at top with good example or jQuery add notification bar to website with good example. Using jQuery and css properties we can show notification bar at top of the page.

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 () {
$("#btn_Close").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</label>
<br />
<input type="button" id="btn_Close" value="Close" />
</div>
<div style="margin-left:50%">
<a href="" id="hrefshownotfify">Show Notification Bar</a>
</div>
</body>
</html>

Output

jQuery Show Notification Bar on Top of The Page

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza

jQuery Show Notification Bar on Top of The Page

About Nikunj Satasiya

Related Post