¿Cómo hago para que mi "barra de alerta" empuje hacia abajo todo mi sitio web?

Question

Escribí una barra de alerta como esta:

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
}

Bastante simple. Llamo a alertbar("Go go go!"); para que se despliegue esta alerta.

Sin embargo, cubre la página del cuerpo. Quiero que "empuje" hacia abajo en toda la página (todos los elementos) ... algo así como StackOverflow lo hace, supongo.

javascript jquery html css

4

TIMEX 30 jun. 2011 a las 01:02

Answer 1

Creo que es el position: fixed que es tu problema. Esto colocará su elemento en relación con la ventana y lo sacará del flujo normal.

Use position:static (o relative) y asegúrese de que el elemento alertmsg esté en la parte superior del marcado.

5

tjm 29 jun. 2011 a las 21:06

Answer 2

Si desea mantener el position: fixed, simplemente expanda el relleno superior del cuerpo al tamaño del cuadro de alerta.

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

También deberá devolver el relleno después de:

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

Lo mismo para el evento de clic.

2

natedavisolds 29 jun. 2011 a las 21:22

Answer 3

Podrías envolver el resto de tu contenido (para ser empujado hacia abajo) en un div separado y luego insertar tu barra de alerta antes de que

0

Steve Greatrex 29 jun. 2011 a las 21:05

¿Cómo hago para que mi "barra de alerta" empuje hacia abajo todo mi sitio web?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript