I created a simple plugin for jQuery that displays an information bar that looks similar to what most browsers are doing to show messages to a user today. I needed to create something that showed my custom messages when necessary. Total development time on top of jQuery was about 15 minutes. This is the best framework ever!
infoBar is easy to use. Here is what you do:
showInfoBar(‘This is a sample information bar!’);
Once the infoBar shows and the user clicks the close link on the right the hideInfoBar(); function is called. This is automatically wired up. All you have to do is display the bar and everything else just works.
infoBar also resizes when the user resizes the browser and always stays on the top of the browser when the user scrolls the page.
I really dislike doing CSS so its all customizable inside the script. You just need to include it and you’re all set. Feel free to modify my script. Hopefully the next version gets support for an icon on the left and I will fancy up the close link.
Confirmed to work in IE7, Chrome, and Safari.
infoBar at the jQuery Plugin Repository (download available)
Enjoy!
How can we add html code to the information shown?
You should be able to call the showInfoBar function and pass it any HTML that you want. It should all render in there.
Thanks for this bar. I added it to my site for Firefox version 2.0 users.
hello ,
i just wanted to know how the infobar can appear and be seen without clicking the link , when a page is loaded
@senik You should be able to do it on page load like this (I’m assuming you are already using jQuery):
$(document).ready(function() {
showInfoBar(’This bar is loading when the page loads.’);
});
In this case I’m attaching it to your document ready event. You can call the function from anywhere. A click, mouseover, etc..