jnotify Follow @yiiframework

<div style="position: relative; height:150px; border: 1px solid #DDD;">
    <div id="StatusBar" style="height: 20px;">
    </div>
 
    <div id="Notification">
    </div>
</div>
 
<br />
 
 
<button id="addStatusBarMessage">Add a non permanent message (Status Bar)</button>
<br />
<button id="addStatusBarError">Add a permanent error (Status Bar)</button>
<br />
<br />
<button id="addNotificationMessage">Add a non permanent message (Notification)</button>
<br />
<button id="addNotificationError">Add a permanent error (Notification)</button>
 
<?php // Initialize the extension
$this->widget('application.extensions.jnotify.JNotify', array(
    'statusBarId'=>'StatusBar',
    'notificationId'=>'Notification',
    'notificationHSpace'=>'30px',   
    'notificationWidth'=>'280px',
    'notificationShowAt'=>'topRight',
    //'notificationShowAt'=>'bottomLeft',
    //'notificationAppendType'=>'prepend',
)); ?>
 
 
<script type="text/javascript">
$('#addStatusBarMessage').click(function() {
    $('#StatusBar').jnotifyAddMessage({
        text: 'This is a non permanent message.',
        permanent: false,
        showIcon: false
    });
});
 
$('#addStatusBarError').click(function() {
    $('#StatusBar').jnotifyAddMessage({
        text: 'This is a permanent error.',
        permanent: true,
        type: 'error'
    });
});
 
$('#addNotificationMessage').click(function() {
    $('#Notification').jnotifyAddMessage({
        text: 'This is a non permanent message.',
        permanent: false
    });
});
 
$('#addNotificationError').click(function() {
    $('#Notification').jnotifyAddMessage({
        text: 'This is a permanent error.',
        permanent: true,
        type: 'error'
    });
});
 
$(document).ready(function() {
    $('#Notification').jnotifyAddMessage({
        text: 'Hello world!'
    });
});
</script>
 
Code taken from: http://www.yiiplayground.cubedwater.com/index.php?r=ExtensionModule/ui/JNotify