JQuery 함수가 예상대로 작동하지 않습니다.

Question

브라우저 창의 왼쪽과 (가운데에있는) 탐색 메뉴 사이에 중간에 로고를 배치하는 약간의 함수를 작성했습니다. 메뉴 항목은 데이터베이스에서 채워지며 첫 번째 항목에는 id item0이 지정됩니다.

function positionLogo(){ 
    var $menuleft=0; 
    var $element=document.getElementById('item0'); 
    if ($element.offsetParent) { 
     do { 
      $menuleft+=$element.offsetLeft; 
     } while ($element=$element.offsetParent); 
    } 
    var $logoleft=($menuleft/2)-130; // As logo is 260px wide 
    if ($logoleft<0) { 
     $logoleft=0; 
    } 
    $('#logo').css('left',$logoleft); 
} 

$(document).ready(function(){ 
    positionLogo(); 
}); 

$(window).resize(function(){ 
    positionLogo(); 
}); 

창 크기를 조정할 때이 잘 작동

하지만 페이지가로드 될 때 처음 실행, 그것은 설정 위치가 약 20 픽셀이 너무 오른쪽 때 (즉, $ logoleft는 20 그것이 있어야보다). 페이지 크기를 조정하면 바로 올바른 위치로 이동합니다.

아무 때 나 살고 싶지는 않지만 누구에게 아이디어가 있습니까? 감사!

Answer 1

이 교체 :

이와

$(document).ready(function(){ 
    positionLogo(); 
}); 

$(window).resize(function(){ 
    positionLogo(); 
}); 

: 당신이 대신 document.ready의 window.load 방법을 할 수 있도록

$(window).bind('load resize', positionLogo); 

당신은 (이미지 등,로드) 마무리하기 위해 레이아웃과 모든 크기가 필요합니다. 공백으로 구분 된 이벤트를 취하는 bind()과 결합하면 간단한 단일 행 처리기로 그 이벤트를 가져올 수 있습니다. 하나의 다른 메모, 그냥 function() { }에 함수를 래핑 할 필요가 없습니다, 위처럼 함수 이름을 넣어 :

Answer 2

window.onload을 사용해 보셨습니까? 페이지가 완전히로드 될 때 DOM이 준비가되면이보다는, 발광합니다 (같은 $(document).ready)

Answer 3

하면 어쩌면 당신은 크기 조정과 기능 트리거 시도해야 다음 작동하고 창 크기 조정 : 그래서 대체

를 :

$(document).ready(function(){ 
    positionLogo(); 
}); 

로 :

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

Answer 4

나는 현상을 반복 할 수 없었다. IE에 버그가 있습니다. 그 이유는 요소를 어떻게 배치했는지에 따라 무언가를 할 수도있는 offsetParent과 관련이 있습니다. jQuery에서 offset 메소드를 사용하면 브라우저 비 호환성을 해결할 수 있습니다.

어떤 이유로 Firefox에서 심지어 left 스타일의 단위를 지정하지 않고도 작동하는 것처럼 보이지만 실제로는 하나 있어야합니다.

function positionLogo(){ 
    var menuleft = $('#item0').offset().left; 
    var logoleft = Math.max(0, (menuleft/2) - 130); // As logo is 260px wide 
    $('#logo').css('left', logoleft + 'px'); 
} 

또는 간단하게는 :

function positionLogo(){ 
    $('#logo').css('left', Math.max(0, ($('#item0').offset().left/2) - 130) + 'px'); 
}