Ramesh Soni‘s customizable jQuery plugin shows a notification message box in the topbar, so you don’t miss out on your new messages anymore. 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>

HTML

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

DEMO

Incoming search terms for the article:

• showtopbarmessage
• jquery notification message box
• jquery topbar
• jquery top bar message
• topbar jquery
• jquery top bar notification
• show notifcation box such facebook with jqeury
• jquery top bar
• jquery message box
• jquery designed messagebox