使用Modernizr和Zepto时window.resize失败 [英] window.resize fail when using Modernizr and Zepto

问题描述

使用JavaScript和Zepto库调整元素的大小时遇到​​问题.当页面加载时，元素将获得窗口的宽度和高度.我还用alert()测试了window.resize，它也可以正常工作.我尝试在窗口更改大小时调整元素大小时发生问题.这是通过Modernizr加载的我的JavaScript:

I'm having a problem with resizing an element using JavaScript and the Zepto library. When the page loads the element gets the window width and height just fine. I have also tested my window.resize with an alert() and that works fine too. My problems occurs when I try and resize the element as the window changes size. Here is my JavaScript which is loaded through Modernizr:

$(document).ready(function()
{
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);

    var navConfig = 
    {
        winWidth        : $(window).width(),
        winHeight       : $(window).height(),
        primaryNav      : $('#primaryNav'),
        openPrimaryNav  : $('#openPrimaryNav'),
        closePrimaryNav : $('#closePrimaryNav')
    }

    function sizePrimaryNavigation()
    {
        navConfig.primaryNav.css(
        {
            'height'    : navConfig.winHeight - 5,
            'width'     : navConfig.winWidth - 20
        });
    }

    function primaryNavigation()
    {   
        navConfig.openPrimaryNav.bind('click', function()
        {
            navConfig.primaryNav.addClass('open');
        });

        navConfig.closePrimaryNav.bind('click', function()
        {
            navConfig.primaryNav.removeClass('open');
        }); 
    }

    sizePrimaryNavigation();

    primaryNavigation();

    window.onresize = sizePrimaryNavigation;
});

我还建立了一个有效的演示- http://jsfiddle.net/nicklansdell/DWbNS/2/单击演示中我要调整大小的元素的菜单按钮.

I have also set up a working demo - http://jsfiddle.net/nicklansdell/DWbNS/2/ Click the menu button on the demo for the element I am trying to resize.

有人可以告诉我我在做什么错吗?预先非常感谢.

Can anyone tell me what I am doing wrong please? Many thanks in advance.

推荐答案

我检查了一下，编写了这样的函数，它将起作用. 演示在这里

I checked, write the function like this, it will work. demo is here

http://jsfiddle.net/DWbNS/7/

http://jsfiddle.net/DWbNS/9/

顺便说一下，zepto doc说"bind"是已弃用，请改用on".

and by the way,zepto doc says "bind" is "Deprecated, use on instead."

function sizePrimaryNavigation()
{
    navConfig.primaryNav.css(
    {
        'height'     : win.width() - 5,
        'width'        : win.height() - 20
    });

}
$(window).resize(sizePrimaryNavigation);
// window.onresize = sizePrimaryNavigation;
// will work too

这篇关于使用Modernizr和Zepto时window.resize失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！