Noticebar
What?
Noticebar is jQuery plugin that adds, well, a noticebar to the top of any page. Much like the one that will have shown up right about now.
Why?
A while back I wanted to drive traffic from one of my older sites to a successor site. Inspired by the IE security alert page I whipped up a very ugly, static solution, a purely html lime green bar across the top of the page. Before that I had searched for a javascript solution but came up empty handed. Since then I’ve been meaning to create Noticebar for a while.
Features
It uses minimal markup and accepts several options.
- Use of text and HTML markup
- Custom CSS to change the appearance.
- Optionally have the bar slide into view, like I have done here.
- With animation on you can have the bar’s arrival delayed, again like done on this page.
- A close button
- Prepend the Noticebar to any div by specifying the target argument.
Example code
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.noticebar.js”></script>
<script type=”text/javascript”>
jQuery.fn.noticebar({html: “your text or html here”, close : false,});
</script>
To use the above code copy and paste it inside your websites head tag. By this I mean between the “<head>” and the “</head>” part.
Options
A list of accept settings with their defaults:
jQuery.fn.noticebar({
html : “Notice is credit to team!”, //Your message which can use html
animate : true , //true means that the noticebar will ‘slide’ down after the delay
delay : 0 , //A delay in milliseconds, 1000 would be one second
css : “”, //Used to customize CSS styling
close : true, //Whether the close button appears
target : “body”, //Use “#id” you have the noticebar appear on an element with said id, .class for classes})
Download jquery.noticebar.js | Preview An example page