Warning messages

by secretgspot

HTML

<div class="info message">
         <h3>FYI, something just happened!</h3>
         <p>This is just an info notification message.</p>
</div>

<div class="error message">
         <h3>Ups, an error ocurred</h3>
         <p>This is just an error notification message.</p>

</div>

<div class="warning message">
         <h3>Wait, I must warn you!</h3>
         <p>This is just a warning notification message.</p>
</div>

<div class="success message">
         <h3>Congrats, you did it!</h3>
         <p>This is just a success notification message.</p>

</div>

<ul id="trigger-list">
         <li><a href="#" class="trigger info-trigger">Info</a></li>
         <li><a href="#" class="trigger error-trigger">Error</a></li>
         <li><a href="#" class="trigger warning-trigger">Warning</a></li>
         <li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>

CSS

.message
{
        -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, 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);
                                
         -moz-box-shadow: inset 0 -1px 0...

JavaScript

var myMessages = ['info', 'warning', 'error', 'success']; // define the messages types         

function hideAllMessages() {
    var messagesHeights = new Array(); // this array will store height for each
    for (i = 0; i < myMessages.length; i++) {
        messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
        $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport      
    }
}

function showMessage(type) {
    $('.' + type + '-trigger').click(function() {
        hideAllMessages();
        $('.' + type).animate({
            top: "0"
        }, 500);
        return false;
    });
}

$(document).ready(function() {

    // Initially, hide them all
    hideAllMessages();

    // Show message
    for (var i = 0; i < myMessages.length; i++) {
        showMessage(myMessages[i]);
    }

    // When message is clicked, hide it
    $('.message').click(function() {
        $(this).animate({
            top: -$(this).outerHeight()
        }, 500);
    });

});