Call a function inside (window).resize

Question

For my site, I inizialized pageScroller by a function that changes scrollOffset depending on the window width.

jQuery(function offset_value(){
if ($(window).width() < 960)  {
    $(document).ready(function(){
        // initiate page scroller plugin
        $('body').pageScroller({
        navigation: '#nav',
        scrollOffset: -40
        });         
        });
} else {
    $(document).ready(function(){
        // initiate page scroller plugin
        $('body').pageScroller({
        navigation: '#nav',
        scrollOffset: -195
        });
        });
}
}); 

However, I need also to reload this function at window resize. For example, if the user rotate the smartphone, the window width changes. So, I added this code:

$(window).resize(function() {
    offset_value()
}).resize();

The problem is that the scrollOffset value does not change at window resize, as if the offset_value function was not called.

A (not so elegant) solution is to refresh the entaire page at window resize:

$(window).resize(function() {
location.reload();
return;
});

but I don't like one has to wait for the site to reload at the rotation of the device.

Where is the problem? Any suggestion?

Thanks.

Answer 1

One problem here is that your function declaration makes it inaccessible from outside:

jQuery(function offset_value() { ... });

This declares an anonymous function which can only be referenced by offset_value from the function's own body.

To fix this, you must declare the function outside:

function offset_value()
{
    ...
}

jQuery(offset_value); // run on document ready

You can also remove the $(document).read() because that's already done when you use jQuery(fn).

Update

To reinitialise the plugin you need to reset the global pageScroller:

pageScroller = {};
$('body').pageScroller({ ... });

Answer 2

You do not need document ready handler which is there inside the function:

jQuery(function offset_value(){
if ($(window).width() < 960)  {
   // initiate page scroller plugin
    $('body').pageScroller({
    navigation: '#nav',
    scrollOffset: -40
    });
 } else {
   // initiate page scroller plugin
    $('body').pageScroller({
    navigation: '#nav',
    scrollOffset: -195
    });}
}); 

Answer 3

You should not use document-ready handler in your function. Also I would recommend you to create a function and pass it to document-ready handler and window-resize handler

Use

//Create a function    
function offset_value() {
    if($(window).width() < 960) {
        // initiate page scroller plugin
        $('body').pageScroller({
            navigation: '#nav',
            scrollOffset: -40
        });
    } else {
        // initiate page scroller plugin
        $('body').pageScroller({
            navigation: '#nav',
            scrollOffset: -195
        });
    }
};
//Pass function reference to document-ready handler and window resize
$(document).ready(offset_value);
$(window).resize(offset_value).resize();