Momentary infobubble

by adamh

JavaScript

$(document).ready(function() {
    var top = $('body').scrollTop() + $(window).height();
    var balloon = $('<div id="balloon" />');
    balloon.css({
        position: 'absolute',
        'top': top,
        backgroundColor: '#fc0',
        padding: '20px',
        'z-index': 1000
    }).text('This page has been added to your travel planner');
    balloon.appendTo('body');
    var left = Math.round(($(window).width() - balloon.width()) / 2);
    var heightDelta = balloon.height() + 80;
    balloon.css({
        'left': left,
        'opacity': 0
    });
    balloon.animate({
        opacity: 1,
        top: top - heightDelta
    }, 'slow', 'swing').delay(1000).animate({
        opacity: 0,
        top: (top - (heightDelta * 2))
    }, 'slow', 'swing');
})