调整查询大小不按预期工作

我仅在窗口大小时才尝试增加HTML元素的高度，但是当窗口不调整大小时，脚本运行。我已经在网上查看了多个帖子，并且尝试了其他脚本，但似乎没有任何作用。

我将脚本包括在主页中，因为我想要每个页面上的这种行为。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FuzionLogin.Master.cs" Inherits="Fuzion_Login_V2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" type="text/css" href="testing.css" />
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <script type="text/javascript">
        $(function () {
            var timer;
            $(window).resize(function () {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    $('html').css("height", "150%");
                });
            }).resize();
        });
    </script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ContentPlaceHolder ID="HeaderHolder" runat="server"></asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="PageInfo" runat="server"></asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</form>
<asp:ContentPlaceHolder ID="FooterContent" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>

正在发生的情况：

}).resize();

这将触发DOM Ready事件中的.resize()。因此，您必须将其更改为：

$(function () {
    var timer;
    $(window).resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('html').css("height", "150%");
        });
    }); // <----remove the trigger here.
});

根据您的评论，一些更改：

$(function () {
    var timer, $win = $(window);
    var win_w = $win.width(); // cache the orig width
    var win_h = $win.height(); // cache the orig height
    $win.resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            if($win.width() === win_w && $win.height() === win_h){ // check if width height are equal to cached ones
              $('html').css("height", "100%");
            }else{
              $('html').css("height", "150%");
            }
        });
    }); // <----remove the trigger here.
});

相关内容

最新更新

热门标签：