Create JQuery Top Notification Bar with HTML and CSS

Create JQuery Top Notification Bar with HTML and CSS

In this Post We Will Explain About is Create JQuery Top Notification Bar with HTML and CSS With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Create Top Notification Bar with HTML and CSS Example

In this post we will show you Best way to implement Add Notifications in your Website using jQuery, hear for Create a Simple Notification Bar on Top of Page using jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Include Header navigation and Footer in PHP

Getting Started for JQuery Notification Bar on Top

We have used CDN(libs) for jQuery so you must need Your internet Data connection for them to work on Show Notification Bar on Top.

<script type="text/javascript" src=""></script>


This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(JQuery Notification Bar on Top) dependencies and the HTML Elements that we have created.

<div id="live_notify_div" class="live_notification">
<label>Simple jQuery Notification Bar on Top Example -</label>
<hr />
<input type="button" id="close_Btn" value="Close" />
<div style="margin-left:50%">
<a href="" id="dsiplay_notification">Show Notification Bar</a>


This contains our simple custom index.js files Add Like as javascript, jquery scripts

Also Read :   Set Cookies Get Cookies Delete Cookies with PHP

$(function () {
	$("#close_Btn").click(function (evt) {
	$("#dsiplay_notification").click(function (evt) {


Last step, we have add the Following CSS styles for our simple JQuery Notification Bar on Top and our Custom styling.

font-weight: bold;
position: absolute;
text-align: center;
background-color: #3d3d3d;
color: white;
border-bottom-width: 3px;
border-bottom-color: #c60000;
border-bottom-style: solid;
text-align: center;
padding: 12px;
width: 100%;
top: 0px;
left: 0px;

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example


I hope you have Got What is jQuery Show Notification Bar on Top of the Page with Example And how it works.I would Like to have FeedBack From My Blog( readers.Your Valuable FeedBack,Any Question,or any Comments about This Article( Are Most Always Welcome.