Вертикальное выравнивание Div с использованием jQuery для установки margin-top - PullRequest
Новая
       12

Вертикальное выравнивание Div с использованием jQuery для установки margin-top

2 голосов
/ 18 февраля 2010

Может кто-нибудь сказать мне, где я иду не так ... Я использую следующее, чтобы выровнять div по вертикали, установив margin-top, используя (window) .height. 625 - высота центрированного Div ...

Это работает в Firefox, но IE7 не устанавливает верхнюю границу, пока вы не измените размер окна браузера.

Тестовый участок находится на http://guylloyd.co.uk

Любая мысль была бы удивительно оценена!

Мартин 

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

});

Ответы [ 2 ]

1 голос
/ 18 февраля 2010

Вам действительно не нужно использовать jquery для разметки контента таким образом, простые css и xhtml могут достичь того же.

Это может быть проблемой, аналогичной IE6, которая вызывает задержку вjavascript, который нужно выполнить, попробуйте включить тайм-аут и вызов кода, который Сет разработал 

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

});
0 голосов
/ 18 февраля 2010

Я не уверен в вашем реальном вопросе, поэтому IE7 не устанавливает маржу до тех пор, пока вы не измените размер окна, но вы можете подумать об уменьшении избыточного кода следующим образом: 

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

Что касается IE, что произойдет, если вы добавите в метод некоторые операторы оповещения, чтобы вы могли определить, когда они вызываются. IE7 не выполняет функцию document.ready? Или он выполняет, но ничего не делает?

...