JS & CSS3 Notifications

by jcubed111

HTML

<textarea id='message'></textarea><br/>
<input id='image' /><br/>
<button onclick='notify(document.getElementById("message").value, document.getElementById("image").value)'>Notify!</button>

<div id='notifications'>
    
    <div class='notification'>
        <div class='highlight'>&nbsp;</div>
        <div class='content'>
            <img class='icon' src='http://www.gravatar.com/avatar/7f93694661a6d82291a7aa64a38832e1?s=40&r=g'/>
            <div class='text'>
                <span class='title'>Jcubed</span> says that 2+2=4.
            </div>
        </div>
        <div class='close' onclick='closeNotification(this.parentNode)'>
            <span>X</span>
            <div class='highlight'>&nbsp;</div>
        </div>
    </div>
    
    <div class='notification'>
        <div class='highlight'>&nbsp;</div>
        <div class='content'>
            <img class='icon' src='http://www.gravatar.com/avatar/7f93694661a6d82291a7aa64a38832e1?s=40&r=g'/>
            <div class='text'>
                <span class='title'>Jcubed</span> commented on How To Build CSS3 Notifications.
            </div>
        </div>
        <div class='close' onclick='closeNotification(this.parentNode)'>
            <span>X</span>
            <div class='highlight'>&nbsp;</div>
        </div>
    </div>
    
</div>

CSS

BODY{
    background:url("http://farm2.static.flickr.com/1092/749703424_17ab566d5c.jpg");
}

textarea, input{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    
    width:200px;
    height:75px;
    background:rgba(51,51,51,.75);
    border:1px solid #000000;
    border-radius:7px;
    outline:none;
    padding:5px;
    color:#FFFFFF;
}

input{
    height:20px;
    padding:0 5px;
}

textarea:focus, input:focus{
    background:rgba(51,51,51,.95);
}

div#notifications{
    position:absolute;
    bottom:0px;
    right:10px;
}

div.notification{
    display:block;
    width:250px;
    border-radius:7px;
    font-family:sans-serif;
    border:1px solid #000000;
    position:relative;
    background:rgba(51,51,51,0.9);
    color:#FFFFFF;
    font-size:12px;
    text-align:left;
    bottom:0;
    right:0;
    margin-bottom:10px;
    padding:7px;
    font-size:0;
    overflow:show;
}

div.notification .content{
    overflow:hidden;
    position:relative;
}

div.notification .icon{
    height:40px;
    width:40px;
    border:1px solid #000000;
    border-radius:5px;
    box-shadow:0 0 3px #000000;
    float:left;
    opacity:1;
    margin-right:7px;
    background:#000000;
}

div.notification .text{
    diplay:block;
    width:200px;
    float:right;
    text-align:left;
    font-size:13px;
    font-family:sans-serif;
    color:#BBBBBB;
    text-shadow:1px 1px 2px #000000;
}

div.notification .text .title{
    font-weight:bold;
    color:#FFFFFF;
}

.goaway{
    /*-webkit-transition-property:opacity, height, overflow;
    -webkit-transition-duration:0.5s, 0.5s, 0.5s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay;0s, 0.5s, 0.5s;
    
    transition-property:opacity, height, overflow;
    transition-duration:0.5s, 0.5s, 0.5s;
    transition-timing-function:ease-in-out;
   ...

JavaScript

function notify(text, src) {
    element = document.createElement('div');
    element.className = 'notification';

    highlight = document.createElement('div');
    highlight.className = 'highlight';
    highlight.innerHTML = '&nbsp;';
    element.appendChild(highlight);

    content = document.createElement('div');
    content.className = 'content';

    if (src) {
        icon = document.createElement('img');
        icon.className = 'icon';
        icon.src = src;
        content.appendChild(icon);
    }

    message = document.createElement('div');
    message.className = 'text';
    message.innerHTML = text;
    content.appendChild(message);

    element.appendChild(content);

    element.innerHTML += "<div class='close' onclick='closeNotification(this.parentNode)'><span>X</span><div class='highlight'>&nbsp;</div></div>";

    document.getElementById('notifications').appendChild(element);
}


function closeNotification(element) {
    element.style.height = (element.scrollHeight - 14) + 'px';

    setTimeout(function() {
        element.className += ' goaway';
    }, 0);

    setTimeout(function() {
        element.style.display = 'none';
    }, 500);
}