Question

I am working on some JS to display a Twitter-eque error/success banner. I would like the banner to be visible at the top of the browser (FF, Chrome, Safari) for the duration of the time it is in view (including if the user decides to scroll somewhere else). I can’t figure out the solution however.

Another issue I am having is with jQuery not appending a passed in message to the #alert div I am using for all of this.

var alertBanner = function(msg){
    var $alert = $('#alert');
    if($alert.length) {
        $('#alert').empty();
        $(msg).appendTo('#alert');
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 3000);
        $alert.animate({height: $alert.css('line-height') || '50px'}, 200)
        .click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({height: '0'}, 200);
        });
    }
}

Answer 1

For top bar use this CSS:

#alert{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:50px;
 padding:5px;
}

Now create a div like this giving it the id alert:

<div id="alert">I am a top bar !!</div>

For jQuery:

Instead of:

$(msg).appendTo('#alert');

Use:

$('#alert').html(msg);

Or use the text for text-only message.

More Info:

• http://api.jquery.com/html/