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.