Notification Bar Example

Notification Bar Example using Html and CSS 3 with jQuery

HTML

<br/><br/><br/><br/><br/><br/>
<button id='testErrorButton'>Test Error Notification</button>  
<button id='testSucceessButton'>Test Success Notification</button>    
<button id='testInfoButton'>Test Info Notification</button>   
<button id='testWarningButton'>Test Warning Notification</button>   

<div id="notificationLog" class="notification">

</div>

CSS

/* Styles for Notifications */
.notification {
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
    background-image: -webkit-gradient(linear, left top, right bottom,                                                        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),                                                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),                                                        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),                                                        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,                                                        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,                                                        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,                                                        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,                                                        transparent 75%, transparent);
    background-image: linear-gradient(135deg,...

JavaScript

var myApp = myApp || {};

myApp.notification = (function (myApp, $, undefined) {
    var notification = {};

    //---------------PUBLIC FUNCTIONS--------------------
    myApp.initPage = function () {
        $('#notificationLog').on('click', 'div.close', function () {
            hideMainNotification();
        });

        // Initially, hide them all                 
        initializeNotification();
    };

    notification.showNotification = function (type, header, message) {
        var notificationLog = $('#notificationLog');
        notificationLog.stop()
            .removeClass('error')
            .removeClass('success')
            .removeClass('info')
            .removeClass('warning')
            .addClass(type)
            .html('<h3>' + header + '</h3><div class="close">close</div><div class="message">' + message + '</div>')
            .animate({ top: "0", left: "0" }, 500)
            .delay(1000)
            .animate({ top: -notificationLog.outerHeight() }, 500);
    };
    notification.hideNofication = function () {
        hideMainNotification();
    };

    //----------------PRIVATE FUNCTIONS------------------
    function hideMainNotification() {
        var $notificationElem = $('#notificationLog');
        $notificationElem.stop()
                .animate({ top: -$notificationElem.outerHeight() }, 500);
    }
    
    function initializeNotification() {
        var $notificationElem = $('#notificationLog');
        $notificationElem.css("top", -$notificationElem.outerHeight());
    }


    //return out the workItem Module
    return notification;
})(myApp || {}, jQuery);

myApp.initPage();

$('#testErrorButton').on('click', function(evt) {
    myApp.notification.showNotification('error', 'An Error Occurred', 'Some bogus error occurred in this thing test 123!');
});
$('#testSucceessButton').on('click', function(evt) {
    myApp.notification.showNotification('success', 'Success', 'Some successful message goes...