• Tweet

In this tutorial we will create a neat and simple notification bar which allows you to integrate the notifications on your website. It can be used to create alert, success, error, warning, confirmation messages as an alternative to the standard alert dialog or to notify the visitors about the latest updates etc.

Once the page is loaded, our notification bar will slide down automatically. When we click the close button in the bar, it should slide up and a button should appear to show the bar again.

HTML:

We need to create two divs just after the body tag. First div for the content of the notification bar, and the second div for the button to open the notification bar when it is closed.

     <!-- notification bar --->
	<div class="note-bar">
		<p>This is a simple notification bar by gazpo.com</p>
		<a href="#" id="hidebar" class="close">
            <img src="images/icon-close.png">
		</a>
	</div>

	<!-- Button to open notification bar -->
	<div class="open-button">		
		<a href="#" id="showbar">
			<img src="images/icon-open.png">
		</a>
	</div>

As you can see above, the notification bar div contains some text and a close button, while the open button div contains only a link to show the bar.

CSS:

Lets add some style for the notification bar and the button.

.note-bar{
	display:none;
	overflow: hidden;
	background: rgba(255, 88, 61, 0.4);
	height: 38px;
	border-bottom: 4px solid #fff;
}

.note-bar p {
	color: #FFFFFF;
	float: left;
	font-size: 12px;
	line-height: 36px;
	margin: 0 0 0 10px;
	padding: 0;
	text-shadow: none;
}

.close{
	margin: 8px 10px 0 0;
	float: right;
}

.open-button {
	padding-top: 7px;
	width: 30px;
	background: rgba(255, 88, 61, 0.4);
	border: 4px solid #fff;
	border-top: 0px;
	position: fixed;
	top: 0;
	right: 20px;
	display: none;	
}

We have set the display:none for the .note-bar and the .open-button so that these div’s do not appear on the page by default. We will use the jQuery to show or hide these divs.

jQuery:

First of all, we need to include jQuery in the document head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Now let’s start with the jQuery part:

We need to tell the browser to execute our code when the document is ready:

<script type="text/javascript">
  $(document).ready(function(){

  });
</script>

Slide down the .note-bar as soon the document is ready.

$(".note-bar").slideDown(300);

The 300 is animation duration in milliseconds. Higher values indicate slower animations.

Now our notification bar is visible on the page. When we click on the close button, we will call the jQuery function to slide it up and slide down the open button.

$("#hidebar").click(function(){
	$(".note-bar").slideUp(300, function(){
		$(".open-button").slideDown(300);
	});
	return false;
});

This will slide up the .note-bar, and once the animation is completed, it will slide down the .open-button div, so that the open button becomes visible.

Now we have open button visible. When we click on it, we will use the similar function to slide up the button and slide down the notification bar.

$("#showbar").click(function(){				
	$(".open-button").slideUp(300, function(){
		$(".note-bar").slideDown(300);
	});
	return false;
});

This function is similar to the above previous function. First it slides up the .open-button, and once the animation is completed, it slides down the .note-bar.

That’s all. Here’s the full jQuery Code:

<script>
	$(document).ready(function(){			 

		$(".note-bar").slideDown(300);	

		$("#hidebar").click(function(){
			$(".note-bar").slideUp(300, function(){
				$(".open-button").slideDown(300);
			});
			return false;
		});	

		$("#showbar").click(function(){				
			$(".open-button").slideUp(300, function(){
				$(".note-bar").slideDown(300);
			});
			return false;
		});		

	});
</script>