jQuery Notification Bar Header Top Notification

We are creating Notification Bar using jQuery in Header Top of your web site or web page. Creating Notification bar we need to use some fadein, fadeout effect in element to hide or show notification bar.

 
 

DemoDownload

 
 

First create HTML code. Take the div tag and assign the class name is “jquery-bar”. In this elements add some text notification message inside the span tag. and this HTML code structure is like this.

 


<!-- Start jQuery Notification Bar -->
<div class="jquery-bar">
    <span class="notification">
        <p class="font-style">&laquo; Back to WebTuts Article - <a href="#">jQuery Notification Bar (Header Top Notification) - Example Demos Download</a></p> <p class="jquery-arrow down"><img src="img/up-arrow.png" alt="Click to Hide Notification" style="cursor:pointer;"></p>
    </span>
</div>
<span class="downbar jquery-arrow"><img src="img/down-arrow.png" alt="Click to Show Notification" style="cursor:pointer;"></span>
<!-- End jQuery Notification Bar -->

 

Set CSS design of every HTML elements which are we use. Class property is set in following manner.

 


.jquery-bar {
	background: #FFFFFF; /* #FAFAFA */
	width:101.40%;
	position: relative;	
	margin:-13px 0px 0px -5px;
	padding: 2px 0px 0px 0px;	
	border-bottom:2px solid #CC0000;
	box-shadow: 0px 4px 5px #AAAAAA;
	font-size:14px;
	font-family: 'Lato Regular', Arial;
	text-transform:uppercase;
}

.jquery-bar .notification {
	display:block;
	width:auto;
}

.downbar {
	cursor:pointer;	
	top:0px;
	right:70px;	
	padding:0px 3px 0px 3px;
	position:absolute;
	background:#FFFFFF;
	border-radius:0px 0px 5px 5px;	
	border:2px solid #CC0000;
	box-shadow: 0px 4px 5px #AAAAAA;	
	border-top:none;
}

.downbar:hover{
	background: url(../jix/bg.png);
	cursor:pointer;
}

.down {
	position:absolute;
	top:3px;
	right:85px;
}

.up {
	top: -45px;
	display: none;
}

.arrow {
	cursor:pointer;
}

.font-style{
	text-align: center;
}

.font-style a{
	color:#CC0000;
	font-size:15px;
	text-decoration:underline;
	text-transform:none;
}


 

Now, create a jQuery script using jQuery library and jQuery UI (User Interface). jQuery library is provide a functions. And jQuery UI is provide a User Interactive design functions. But if you want not compulsory use the jQuery UI library. No need just remove the imported file link.

 

Following jQuery script code write inside HTML file head part inside script tag.

 


<script>
    $(document).ready(function() {
        // jBar Script by Todd Motto
        $('.downbar').delay(1000).fadeIn(400).addClass('up', 600);
        $('.jquery-bar').hide().delay(2500).slideDown(400);
        $('.jquery-arrow').click(function(){
            $('.downbar').toggleClass('up', 400);          
            $('.jquery-bar').slideToggle();
        });     
    });
</script>

 

Your Notification bar is created. It’s work fine or not you check any suggestion discuss write on Comment box. Your opinion is valuable for me. Thanks.

 

Subscribe to our RSS feed. New article notification sends you via E-Mail or following social share button to share this article.

Back to Top
About the Post Writer View all posts by
I'm write of this article and founder of Way2tutorial or Webtuts Web Development Programming blog. My passion is keen on contributing WEB Industry. Mostly I do work on PHP, WordPress, Drupal. I hope you enjoy with this articles. Thanks for reading.

4 Comments Discussion

  1. BadGnome on May 15, 2013 - Reply to this Comment

    It is a trendy and very helpful item of facts. I’m just satisfied that you discussed this useful data along with us. You should stop us updated similar to this. Appreciate your discussing.

Leave a Reply

Your email address will not be published. Required fields are marked *