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

我在想这可能是代码的时间或范围问题，但由于某种原因我没有看到它。也许头脑清晰的人可以发现问题？

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