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

score 1 · Accepted Answer · edited May 23 '17 at 11:52

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.

edited May 23 '17 at 11:52

Community

1
1

answered Jul 12 '14 at 02:09

d0c

515
5
7

Thanks for you hints! I modified the scrollIt.js as you said (lines 25, 49, 109, 110) and exchanged the jQuery stuff with yours, but the whole script doesn’t work anymore. See my fiddle: http://jsfiddle.net/x23Te/1/ Any clue why? – user1706680 Jul 12 '14 at 09:06
Hmmm... I guess I didn't check the code you posted thoroughly. A right parenthesis was missing before the last semicolon. Looks like the script is working fine now http://jsfiddle.net/x23Te/3/ (try hitting the down arrow a couple of times), though you should probably change what you assign to value.val in order to get the result you want. – d0c Jul 12 '14 at 09:40
Oh, I forgot to mention: I'm not sure what exactly you're trying to do with $(".height").css("height"). Unless you actually have an element with class "height" in the document, $(".height") will return an empty array. This is why I added a "height" class somewhere in the jsfiddle above. Can you elaborate on the intended behaviour? – d0c Jul 12 '14 at 09:50
Thank you very much! I have a fixed navigation on top and its height changes depending on the viewport. So I have to adjust the topOffset value each time when the height of the navigation changes. With `$(".height").css("height")` I get the height of the nav from the stylesheet. – user1706680 Jul 12 '14 at 12:01

score 0 · Answer 2 · answered Jul 06 '14 at 19:58

Try this, worked here:

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

Update value in jQuery function when resizing

2 Answers2