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!
Edit:
Blake Pell took infoBar.js and wrapped it to create an ASP.NET control that can be used on your site. Go check it out.
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..
I love this code, I used it to make an ASP.NET Ajax control that’s pretty wicked. I changed the “hideInfoBar” function so that it would animate and slide up as opposed to just disappearing. Here’s the update I made, I wanted to share, it executes the slideUp and then when that is done, it removes the #infoBar:
function hideInfoBar() {
$(“#infoBar”).slideUp(
400,
function() {
$(“#infoBar”).remove();
}
);
}
@John glad it helped you out. Mail me a link to your control and I can add it to the original post.
I’ve been meaning to update this with some animation options and some other ideas but I just haven’t had the time.
Will do.
I’ll put it in a project and put it online, hopefully tonight. It really online took 2 lines of code where I registered a startup script call.. then it can be called from any code behind like:
InfoBar.ShowInfoBar(“This is a test @” & Now, “Maroon”)
I’ll try to do that tonight, but if not I’ll post it from work tomorrow.
@Alex
Here’s a link to a demonstration page of your jquery info bar wrapped in an ASP.NET user control. I include the web-site project zipped up so the entire source can be downloaded (I used the .Net Framework 3.5 but it really should work for any version 1.1 and up as far as I can see).
http://www.blakepell.com/Main/InfoBar/Default.aspx
Blake.
I think I also said this was an ASP.NET Ajax control. That’s
Either way, thanks for sharing your jQuery
not exactly accurate. This control will work whether you’re
using ASP.NET Ajax or not. It works very well with an UpdatePanel
though. If you click “Close”, the InfoBar scrolls back up, but
if you invoke another server side event, it just disappears which
wasn’t my initial intention but it’s actually how I preferred that
it would work.
code, I’m learning it now and I love it so far.
No problem. Glad someone was able to learn from it. You’ve been linked!