Re-Calculate width after browser resize

Question

I am running a third party script and it calculates an element's width upon loading. It works great but I have a responsive website and when I re-size the browser the element is no longer displayed correctly.

Here is the code that is used to calculate the width:

var w = ticker.width();
if (label.length) w -= label.outerWidth() + parseFloat(label.css("margin-right"));
if (controls.length) w -= controls.outerWidth() + parseFloat(controls.css("margin-left"));
news.css("width", w);

How do I modify this part of the script to re-calculate the width when the browser is resized?

score 5 · Accepted Answer · answered May 29 '13 at 21:30

5

Here is what work best

$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
      $(this).trigger('windowResize');
    }, 500); 
});
$(window).on('windowResize', function() {
   console.log($(window).width()); // calculating here
});

reason for having timeout is that window takes some time to get settel the width but classic window.resize event get triggers before it setteled down

answered May 29 '13 at 21:30

Rohit Agrawal

5,372
5
19
30

very nice, clean & practical – Francis Kim May 29 '13 at 23:33
can you explain why one is resize() and the other is on() ? – Francis Kim May 29 '13 at 23:33
windowResize is the custom event passed by me so to listen that i use on() – Rohit Agrawal May 30 '13 at 16:33
Oh, that explains it. Thanks Rohit! – Francis Kim May 30 '13 at 23:21

score 0 · Answer 2 · answered May 29 '13 at 21:23

0

$(window).on('resize', function(){
   //your code to calculate the width
});

answered May 29 '13 at 21:23

claustrofob

5,448
2
19
22

Re-Calculate width after browser resize

2 Answers2

Linked