11

infoBar 1.0

Posted March 11th, 2009 in jQuery, javascript by Alex Barberis

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.

Demo of infoBar

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.

11 Responses so far.

  1. Anonymous says:

    How can we add html code to the information shown?

  2. Alex Barberis says:

    You should be able to call the showInfoBar function and pass it any HTML that you want. It should all render in there.

  3. Thanks for this bar. I added it to my site for Firefox version 2.0 users.

  4. senik says:

    hello ,
    i just wanted to know how the infobar can appear and be seen without clicking the link , when a page is loaded

    • Alex Barberis says:

      @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..

  5. John says:

    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.

  6. John says:

    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.

  7. Blake says:

    @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.

    • Blake says:

      I think I also said this was an ASP.NET Ajax control. That’s
      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. :) Either way, thanks for sharing your jQuery
      code, I’m learning it now and I love it so far.

Leave a Reply