How do I make my “alert bar” push down everything of my website?

Question

I wrote an alert bar like this:

alertmsg{
      font-family:Arial,Helvetica,sans-serif;
      font-size:135%;
      font-weight:bold;
      overflow: hidden;
      width: 100%;
      text-align: center;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: #fff;
      height: 56px;
      color: #000;
      font: 20px/40px arial, sans-serif;
      display:none;
      padding-top:12px;
      -webkit-box-shadow: 3px 3px 5px #888;
      -moz-box-shadow: 3px 3px 5px #888;
      box-shadow: 3px 3px 5px #888;
}

function alertbar(m, timeout){
    if(!timeout){
        var timeout = 3000;
    }
    var $alertdiv = $('<div id = "alertmsg"/>');
    $alertdiv.text(m);
    $alertdiv.bind('click', function() {
        $(this).slideUp(200);
    });
    $(document.body).append($alertdiv);
    $("#alertmsg").slideDown("slow");
    setTimeout(function() { $alertdiv.slideUp(200) }, timeout);
    return false
}

Pretty simple. I call alertbar("Go go go;"); to have this alert drop down.

However, it covers the body's page. I want it to sort of "push down" on the entire page (all the elements)....sort of like StackOverflow does it I guess.

Answer 1

I think it's the position: fixed that is your problem. This will place your element relative to the window and take it out of the normal flow.

Use position:static (or relative ) and make sure the alertmsg element is at the top of the markup.

Answer 2

There's a couple things you must do:

• Change the position CSS attribute of the "alert bar" to not be fixed and just be normal (remove that property).

• Change your JavaScript to prepend the alertdiv, rather than append it. This will make it the first thing in the body.

  $('body').prepend($alertdiv);

• Slide your $alertdiv down normally.

Now something that you didn't take into account in your code is what happens when you run alertbar more than once. You'll append more than one to the body. If this is a concern, try doing something like this:

var exists = $('#alertmsg').length > 0;
var $alertdiv = exists ? $('#alertmsg') : $('<div id="alertmsg" />');

Now only prepend to the body if it doesn't exist already.

if (!exists) 
    $('body').prepend($alertdiv);

Answer 3

If you want to keep the position: fixed then just expand the body's top padding to the size of the alertbox.

$("#alertmsg").slideDown("slow", function() {
    var paddingTopStr = "+" + $(this).outerHeight().toString() + "px";
    $('body').css({ paddingTop: paddingTopStr });
});

You will also have to return the padding after:

setTimeout(function() { 
    var paddingTopStr = "-" + $(this).outerHeight().toString() + "px";
    $('body').css({ paddingTop: paddingTopStr });
    $alertdiv.slideUp(200) }, timeout);
}

Same for the click event.

Answer 4

You could wrap the rest of your content (to be pushed down) in a separate div and then insert your alert bar before it