Update value in jQuery function when resizing

Question

I have a jQuery function which contains a variable value that should be updated every time the browser window is resized. I know, the problem is that the function isn’t executed again on resize but I don’t want the whole function to be executed again but only the variable to be updated. Is that possible?

value = parseInt( ( $(".height").css("height") ) ) ;

$( window ).resize( function () {
    value = parseInt( ( $(".height").css("height") ) ) ;
});

$(function(){
    $.scrollIt( {
      upKey: 38,
      downKey: 40,
      easing: "easeIn",
      scrollTime: 600,
      activeClass: "active",
      onPageChange: null,
      topOffset: value
    } );
};

Answer 1

You can very easily modify scrollIt.js to make this possible.

Replace topOffset : 0 with topOffset : {val:0} and

settings.topOffset occurrences with settings.topOffset.val.

To take advantage of these changes, your code should look like:

value = {val:0};
value.val = parseInt( ( $(".height").css("height") ) ) ;

$( window ).resize( function () {
    value.val = parseInt( ( $(".height").css("height") ) ) ;
});

$(function(){
    $.scrollIt( {
      upKey: 38,
      downKey: 40,
      easing: "easeIn",
      scrollTime: 600,
      activeClass: "active",
      onPageChange: null,
      topOffset: value
    } );
});

For more information about why this works, check this out.