google

Show Message Bar at the top of the page using HTML and jQuery

| Wednesday, February 13, 2013
Download Code

This article will focus on displaying notifications or messages at the top of the website page using HTML and jQuery.

Links to required jQuery files will be added in the head section of the page.

  <script src="jquery.js" type="text/javascript"></script> 
 <script src="juery.topbar.js" type="text/javascript"></script>  


The source code includes 4 types of demonstrations of the top message bar.Following script will be included in the head section of the page


  <script type="text/javascript" language="javascript"> 
$(function () { 
$("#ex01").click(function () { 
$('#ex01-body').showTopbarMessage(); 
}); 
$("#ex02").click(function () { 
 $('#ex02-body').showTopbarMessage({ close: 2000 }); 
 }); 
$("#ex03").click(function () { 
 $('#ex03-body').showTopbarMessage({ background: "#043", close: 2000 }); 
 }); 
$("#ex04").click(function () { 
 $('#ex04-body').showTopbarMessage({ height: "180px", close: 2000 }); 
 }); 
 }); 
</script>  


Following types of demonstrations are there:

1. Simple

  <p> 
<a href="javascript:void(0)" id="ex01">Simple</a>     </p> 
<pre>$("#ex01").click(function () { 
 $('#ex01-body').showTopbarMessage();   });</pre> 
 <div id="ex01-body" style="display: none;"> 
 This is a simple demo 
 <span style="font-size: small; cursor: pointer">(click to close)</span> 
 </div>  

2. Automatic close after some time.

  <p> 
 <a href="javascript:void(0)" id="ex02">Automatic close after some time</a> 
 </p>     <pre>$("#ex02").click(function () { 
 $('#ex02-body').showTopbarMessage({ close: 2000 });   });</pre> 
 <div id="ex02-body" style="display: none;"> 
 Automatic close after some time     </div>  

3. With custom background

  <p> 
 <a href="javascript:void(0)" id="ex03">With Custom background</a> 
 </p>     <pre>$("#ex03").click(function () { 
 $('#ex03-body').showTopbarMessage({ background: "#043", close: 2000 }); 
 });</pre>     <div id="ex03-body" style="display: none;"> 
 With Custom background     </div>  

4. Custom height with long text

 <p> 
 <a href="javascript:void(0)" id="ex04">Custom height with long text</a> 
 </p>     <pre>$("#ex04").click(function () { 
 $('#ex04-body').showTopbarMessage({ height: "180px", close: 2000 });   });</pre> 
 <div id="ex04-body" style="display: none;"> 
 Custom height with long text.<br /> 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
 </div>  


0 comments:

Post a Comment

Next Prev
▲Top▲