window.resize fail when using Modernizr and Zepto

问题:

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

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.

回答1:

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

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

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

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

回答2:

You are assigning the onresize property to a jQuery object ($(window)). You MUST assign it to window.onresize instead.