jQuery tutorial Showing Message Box on Topbar

jQuery Showing Message Box on Topbar

jQuery tutorial plays an integral part in the world of web development and its inception has made the lives of web developers easier. Here is a customizable jQuery plugin created by Ramesh Soni that shows a notification message box in the topbar.

Include jQuery and jQuery.topbar.js in your page if you want to use this plugin

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

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

Here’s how you can create the HTML element that shows as the message box in the topbar.

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

To show notifications on topbar, use showTopbarMessage

$(function () {

    $("#demo01").click(function () {

        $('#demo01-body').showTopbarMessage();

    });

});

The following can be configured: background; borderColor; foreColor; height; fontSize; close.

View the demo page here:  http://www.dailycoding.com/Uploads/2011/03/topbar_message/demo.html