jquery variable not updating out of resize

Question

Consider the following code segment :-

jQuery(document).ready(function($){
  var window_width=$(window).width();
  function myresize(){
    window_width=$(window).width();
    console.log('============window width='+window_width+' =========================');
  }
  $(window).resize(myresize);
  if (window_width<options.hide_width){
    console.log('============window width='+window_width+' =========================');
  }
  else
  {
    console.log('============window width='+window_width+' =========================');
  });`

When I resize the correct value for window_width gets logged. However, the conditional code underneath still behaves as if I have not resized. If I then do a page refresh the correct condition runs, and logs the new window size.

So my question is, why is the correct conditional part not running after a resize if the value of window_width is correct?

I am still fairly new to jquery, so please forgive my ignorance if it's something daft, but I am going around in square circles here, and have been unable to google any sort of answer. The numerous similar questions about this on SO are also getting me nowhere.

Thank you.

The options are passed as a paramater from php. This is part of a wordpress plugin. So options.hide_width is just a variable, currently set at 960. that part of it works 100%, so to test just replace it with any number representing a width. — Gavin Simpson
– Gavin Simpson, Commented Jan 3, 2015 at 12:11

tom10271 · Accepted Answer · 2015-01-03 12:11:59Z

1

I guess I got what you mean.

The if-else condition will run once only when document ready after event listener binded to window: $(window).resize(myresize);

If you want the if-else clause run whenever window is resizing, please put whole if-else into myresize function.

$(document).ready(function () {
    var window_width = $(window).width();

    function myresize() {
        console.log(window_width);
        window_width = $(window).width();
        console.log('============window width=' + window_width + ' =========================');

        if (window_width < options.hide_width) {
            console.log('============window width=' + window_width + ' =========================');
        } else {
            console.log('============window width=' + window_width + ' =========================');
        }
    }

    $(window).resize(myresize);
});

answered Jan 3, 2015 at 12:11

tom10271

4,6897 gold badges41 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gavin Simpson Over a year ago

Close. I moved the conditional parts into myresize, but something is still not right. It's works if I maximise a window, i.e. the correct part runs, but it does not work whenever I 'restore down', i.e. make the window smaller. I am still looking into it though.... perhaps I missed something.

tom10271 Over a year ago

If you hardcode options.hide_width to 960 that: if (window_width < 960), it works. jsfiddle.net/8Lyoy7jt I think it is a scope problem(variable is not in current clause/function, might be not passed, note declared at that moment etc.). Try to log options.hide_width inside myresize fn to see it is available to use.

Gavin Simpson Over a year ago

Nah, I tried your suggestion, but options.hide_width is logging correctly no matter where I put it.

Gavin Simpson Over a year ago

I am almost sure your answer above is spot on, and the problem now is with the rest of my code. Just Give time to check it out and confirm. Thanks for the help.

Gavin Simpson Over a year ago

Ok, confirmed your answer is working. I just need to fix another problem and I am on my way. Thanks again. Bottom line is moving the code into myresize sorted the problem.

Collectives™ on Stack Overflow

jquery variable not updating out of resize

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related