Vertikal ausrichten eines DIV mit JQuery, um den Rand festzulegen

StackOverflow https://stackoverflow.com/questions/2289123

  •  21-09-2019
  •  | 
  •  

Frage

Kann mir jemand sagen, wo ich falsch gehe? Ich benutze Folgendes, um eine DIV vertikal auszurichten, indem ich den Rand mit dem (Fenster). 625 ist die Höhe des Divs, das zentriert ist ...

Dies funktioniert in Firefox, aber IE7 setzt den Rand nicht, wenn Sie das Browserfenster ändern.

Die Teststelle ist um http://guylloyd.co.uk

Jeder Gedanke wäre erstaunlich zu schätzen!

Martin 

jQuery.noConflict();
jQuery(document).ready(function () {

jQuery(function(){   
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});   
}
});

jQuery(window).resize(function(){
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});
}
});

});

War es hilfreich?

Lösung

Sie müssen JQuery wirklich nicht verwenden, um die Inhalte auf diese Weise auszuräumen. Einfache CSS und XHTML könnten dasselbe erreichen.

Es könnte ein Problem sein wie in IE6, was zu einer Verzögerung des JavaScripts führt

function doResize() {   
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');   
    if(jQuery(window).height() > 625){   
        jQuery('body').css({'margin-top': $marginTop});   
    }   
}  
//when document has been fully loaded
jQuery(document).ready(function()
{
    setTimeout('doResize()', 1 );

});

Andere Tipps

Ich bin mir nicht sicher über Ihre tatsächliche Frage, weshalb IE7 den Rand nicht festlegt, bis Sie das Fenster ändern, aber Sie könnten in Betracht ziehen, redundante Code wie diesen zu reduzieren:

function doResize() {
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
    if(jQuery(window).height() > 625){
        jQuery('body').css({'margin-top': $marginTop});
    }
}

jQuery.noConflict();
jQuery(document).ready(doResize);
jQuery(window).resize(doResize);

Was IE betrifft, was passiert, wenn Sie der Methode einige Alarmanweisungen hinzufügen, damit Sie feststellen können, wann sie aufgerufen werden. Fügt IE7 die Funktion des Dokuments nicht aus? Oder wird es ausgeführt, aber nichts tun?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top