jQuery Plug-in for Showing Message Box in Topbar

Topbar message box plug-in can be used to showing message box or notifications on a web page. This is very simple to use and easy to configure. Of course you need jQuery to use this.

Usage

To use this plug-in include jQuery and juery.topbar.js in you web page -

<script src="jquery.js" type="text/javascript"></script>
<script src="juery.topbar.js" type="text/javascript"></script>

Now create a html element which you want to show in topbar as messagebox -

<p>
    <a href="javascript:void(0)" id="demo01">Demo 1 - Simple</a>
</p>
<div id="demo01-body" style="display:none;">
    This is a simple demo
    <span style="font-size: small">(click to close)</span>
</div>

Now use showTopbarMessage to show the notification on topbar -

$(function () {

    $("#demo01").click(function () {
        $('#demo01-body').showTopbarMessage();
    });

});

Currently you can configure following attributes -

  • background: Hex code of color for bar background. Default value is - "#888".
  • borderColor: Hex code of color for bar border color. Default value is - "#000".
  • foreColor: Hex code of color for bar fore color. Default value is - "#000".
  • height: Height of the bar. Default value is "50px".
  • fontSize: Size of the text displayed in the top bar. Default value is - "20px"
  • close: Specify how the notifications will be closed. "click" – means it will be closed on click, else specify number of milliseconds after which bar will be closed automatically.

You can view full usage and demonstration on the demo page.

 

10 comment(S)


Beben Koben on Mar 23, 2011 03:50 AM

its a cool...
thanks for tut my master \\m/

Larry Battle on Mar 24, 2011 03:30 AM

Hello, admin.
I was interested in your plugin so I updated it.
It now includes options.speed, which was called 200 in the script.
Also, the overall structure is more jQuery like and the script was simplified.
Oh yeah, I think you meant to called it jquery.topbar.js, not juery.topbar.js
Good job by the way.

Link:
<a href="http://bateru.com/jq....bar-0.2.js</a>

Plain link:
http://bateru.com/jq....jquery.topbar-0.2.js

Cheers
-Larry Battle

Deepan prabhu on Apr 16, 2011 12:54 AM

Thank you ,
You hold a great website . Every article is so carving for a developer/designer because you answer some important problems.

Keep the good work going.

Deepan prabhu on Apr 16, 2011 12:54 AM

Thank you ,
You hold a great website . Every article is so carving for a developer/designer because you answer some important problems.

Keep the good work going.

tso on Apr 22, 2011 09:16 PM

Hi,
Thanks for the great plugin. I have a newbie question, using this plugin, if there are already texts on top part of the page, texts will be overlayed and covered by the topbar. But the notification bar on the stackoverflow, the original texts will push down by the bar. Is there anyway to achieve this?
Thank you!

Rick on May 23, 2011 08:24 AM

Hi,
Great job man, but i have one question about it.
Why this dont work on IE?

escobar on Jul 14, 2011 09:29 AM

Hello,

Great plugin.

I have a question, when I open a second top bar message with the previous still open, then the delay is less than the one configured, I think it's taking the first delay for the second message.

Is there anyway to fix that?

Thanks!!!

Fabio on Aug 1, 2011 10:37 AM

Hi, great job, but how can i put the bar height automatic according to text height?

Jotish on Feb 28, 2012 10:45 AM

I was really in need of such plugin and could find it your site. Really every above comments speaks the true value of your hard work in developing this site. It is awesome. Ill bookmark this site for my website project.

Leave a comment