JS 높이 조정이 작동해야합니다.

Question

화면 크기 때문에 슬라이드 쇼가 더 작을 때 버튼의 높이를 자동으로 조정하기 위해 일부 JS 코드를 사용하고 있습니다. Chrome 콘솔에서 사용하면 작동하지만 사이트에 삽입하면 실패합니다.

사이트 : http://www.incensu.co.uk/

이 /js/main.js의 하단에 주석하고 여기 참조 용입니다 것 같이 내가 코드를 배치하고있어 어디를 볼 수 있습니다

var homeTopMain = $('#homeTopMain'); 
if (homeTopMain) { 
    var btnHeight = (homeTopMain.height()+20)/3-20; // 20px at bottom, 3 buttons, 20px between. 
    $('.btnFlapsBodyWrapper').height(btnHeight); 
    $('.btnFlapsRed').height(btnHeight); 
    $('.btnFlapsGrey').height(btnHeight); 
} 

I 아마도 코드 나 범위 지정 문제의 타이밍이라고 생각하지만, 나는 그저 어떤 이유로 그것을 보지 않고 있습니다. 아마도 명확한 마음을 가진 사람이 문제를 발견 할 수 있을까요?

Answer 1

Zak의 팁은 올바른 방향으로 나를 가리켰다. DOM에서 상위로 이동한다고해서 다른 준비가 완료된 후에 하나의 ready()가 수행되는 것을 보장하지는 않습니다. 올바른 해결책은 $ (document) .ready() 블록에서 코드를 제거하고 $ (window) .load() 블록에 배치하는 것입니다.

Answer 2

DOM이 준비되면 단추의 크기를 조정할 수 있으며 창 크기를 조정할 때도 실행할 수 있습니다.

$(document).ready(function() 
{ 
    function ResizeButton() 
    { 
     var homeTopMain = $('#homeTopMain'); 
     if (homeTopMain) { 
      var btnHeight = (homeTopMain.height()+20)/3-20; // 20px at bottom, 3 buttons, 20px between. 
      $('.btnFlapsBodyWrapper').height(btnHeight); 
      $('.btnFlapsRed').height(btnHeight); 
      $('.btnFlapsGrey').height(btnHeight); 
     } 
    } 
    ResizeButton(); 
    $(window).resize(ResizeButton); 
});