Verticalmente allineare un Div utilizzando jQuery per impostare margin-top

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

  •  21-09-2019
  •  | 
  •  

Domanda

Qualcuno può dirmi dove sto andando male ... Sto usando il seguente ad allineare verticalmente un div impostando il margin-top, utilizzando la (finestra) .height. 625 è l'altezza del div essere centrato ...

Questo funziona in Firefox, ma IE7 non imposta il margin-top fino a quando si ridimensiona la finestra del browser.

Il terreno di prova è a http://guylloyd.co.uk

Ogni pensiero sarebbe incredibilmente apprezzato!

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});
}
});

});

È stato utile?

Soluzione

È davvero non hanno bisogno di usare jQuery per disporre il contenuto in quel modo, semplice css e xhtml potrebbe ottenere la stessa cosa.

Potrebbe essere un problema lo stesso come in IE6 che provoca un ritardo nella javascript da eseguire prova comprendente un time out e una chiamata al codice Seth ha progettato 

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 );

});

Altri suggerimenti

Non sono sicuro circa la vostra domanda reale, che è il motivo per cui IE7 non imposta il margine fino a quando si ridimensiona la finestra, ma si potrebbe prendere in considerazione la riduzione codice ridondante come questo: 

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);

Per quanto riguarda IE, cosa succede se si aggiungono alcune dichiarazioni di avviso al metodo in modo da poter dire quando vengono chiamati. È IE7 non esegue la funzione document.ready? O è in esecuzione, ma non fare nulla?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top