Элементы jQuery не могут центрироваться по вертикали при загрузке

У меня этот код отлично работает на jsfiddle, но когда я кодирую в dreamweaver и просматриваю в Chrome (и других браузерах), центральный div (3 изображения с тестом) не центрируется по вертикали при загрузке. Только когда я масштабирую окно браузера, оно правильно центрируется, как я и ожидал.

Кто-нибудь может помочь? Спасибо!

http://jsfiddle.net/nampham/v6HLT/

HTML

<!--menu-->
<a href="#" id="logo"><b>bitchism<br>.</b></a>
<a href="#" id="projects"><b>projects<br>.</b></a>
<a href="#" id="writings"><b>writings<br>.</b></a>
<a href="#" id="contact"><b>.<br>contact</b></a>
<!--menu-->

<div id="first">
<img src="image/circle.gif" style="width:30%;display:inline-block"/> 
<img src="image/cloud3.gif" style="width:30%;display:inline-block"/> 
<img src="image/circle2.gif" style="width:30%;display:inline-block"/>
<br />Testing
</div>

СЦЕНАРИЙ

$(document).ready(function(){

$(window).resize(function(){


    $('#projects').css({
        position:'fixed',
        top: ($(window).height() - $('#projects').outerHeight())/2
    });

    $('#writings').css({
        position:'fixed',
        top: ($(window).height() - $('#writings').outerHeight())/2
    }); 

    $('#logo').css({
        position:'fixed',
        left: ($(window).width() - $('#logo').outerWidth())/2
    });

    $('#contact').css({
        position:'fixed',
        left: ($(window).width() - $('#contact').outerWidth())/2
    });

    $('#first').css({
        position:'fixed',
        top: ($(window).height() - $('#first').outerHeight())/2,
        left: ($(window).width() - $('#first').outerWidth())/2
    });

});

$(window).resize();

});


body
{
background-color:#FFF;
background-image:url(image/dot.png);
background-repeat:repeat;
font-family: 'VT323', cursive;
text-align:center;  
}


a{
text-decoration:none;
color:#F00;
font-size: 20px;
}

a:hover{
text-decoration:underline;
}

a:active{
text-decoration:line-through;
color:#F00;
}


#logo
{
position:fixed;
left:50%;
top:0;
padding-top:10px;
}



#contact
{
position:fixed;
left:0;
bottom:0;
padding-bottom:10px;    
}


#projects
{
position:fixed;
left:0;
top:50%;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */"

}

#writings
{
position:fixed;
right:0;
top:50%;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg);  /*Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

#first
{
position:fixed;
top:50%;
    left:50%;
}

jquery center
person Nam Pham    schedule 04.04.2013    source источник
comment
Вероятно, потому что у него еще нет высоты и т. д., потому что он запускается при готовности DOM, а не при загрузке окна. Это может помочь: stackoverflow. ком/вопросы/10778070/   -  person ahren    schedule 04.04.2013
comment
Fwiw, вы должны сохранить ссылку на $(window) в верхней части вашего скрипта, чтобы вам не приходилось снова и снова создавать объект jQuery. Что-то вроде $window = $(window); // rest of code uses $window   -  person Impirator    schedule 04.04.2013

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте это, вы должны поместить свой код в именованную функцию, а затем вызвать функцию.

Например:

function onResize() { ... }

тогда

$(document).ready(function(){
    $(onResize);
    $(window).resize(onResize);
});

or

$(document).ready(function(){
    $(window).load('resize', onResize);
    $(window).bind('resize', onResize);
});

Подробнее: функция изменения размера jQuery не работает при загрузке страницы

person freshbm    schedule 04.04.2013

arrow_upward
0
arrow_downward

попробуй это

живая скрипка здесь

    function center_div(){
            $('#projects').css({
            position:'fixed',
            top: ($(window).height() - $('#projects').outerHeight())/2
        });

        $('#writings').css({
            position:'fixed',
            top: ($(window).height() - $('#writings').outerHeight())/2
        }); 

        $('#logo').css({
            position:'fixed',
            left: ($(window).width() - $('#logo').outerWidth())/2
        });

        $('#contact').css({
            position:'fixed',
            left: ($(window).width() - $('#contact').outerWidth())/2
        });

        $('#first').css({
            position:'fixed',
            top: ($(window).height() - $('#first').outerHeight())/2,
            left: ($(window).width() - $('#first').outerWidth())/2
        });
    }

$(window).load(center_div);
$(window).resize(center_div);
person IT ppl    schedule 04.04.2013
comment
@NamPham: Если это соответствует вашим ожиданиям, вы должны пометить это как ответ. - person IT ppl; 04.04.2013