Introduction:
Here I will explain how to use jQuery to show notification bar on top of the page with example or jQuery show notification bar at top with example or jQuery add notification bar to website with example. By using jQuery and css properties we can show notification bar at top of the page.
Description:
In previous articles I explained jQuery show or move div content from left to right, jQuery hide div after 5 seconds example, jQuery slideup, slidedown, slidetoggle effects, jQuery fadein, fadeout div with example, jQuery draggable and resizable div with example, jQuery add fadein effect to page example, jQuery display text over image on hover using content hover plugin and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show notification bar on top of the page in jQuery with example.
In previous articles I explained jQuery show or move div content from left to right, jQuery hide div after 5 seconds example, jQuery slideup, slidedown, slidetoggle effects, jQuery fadein, fadeout div with example, jQuery draggable and resizable div with example, jQuery add fadein effect to page example, jQuery display text over image on hover using content hover plugin and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show notification bar on top of the page in jQuery with example.
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>
|
Demo
Following is the demo to show notification bar at top of
the page using jQuery.
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
thanks for the article. I dont want the pop up on the page loading. ie, when you load the page itself, the pop up is coming. i want to show pop up only when I click button
dsfdsfsvcx
hsursuifsafd
Note: Only a member of this blog may post a comment.