call a function when window resize

Question

I have progress bar on my page. It works, but if I resize window I have problem with it's width - it doesn't change.

html:

<h4 class="progress-title">Title <span class="pull-right">80%</span>/h4>
<div class="progressBar prog-bar1"><div></div></div>

javascript code

   function progress(percent, $element) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 5000).html(percent + "% ");
    }

    try {
        progress(80, $('.prog-bar1'));

    } catch(err) {

    }

How can I call function when window is resized?

Possible duplicate of [JavaScript window resize event](http://stackoverflow.com/questions/641857/javascript-window-resize-event) — Alexander O'Mara, Dec 17 '16 at 20:52

score 1 · Answer 1 · answered Dec 17 '16 at 20:52

1

Use windowresize() jQuery method.

answered Dec 17 '16 at 20:52

wscourge

10,657
14
59
80

score 1 · Accepted Answer · answered Dec 17 '16 at 20:52

You can bind a resize event to the window object:

$(function() {
   $(window).resize(function() {
       function progress(percent, $element) {
            var progressBarWidth = percent * $element.width() / 100;
            $element.find('div').animate({ width: progressBarWidth }, 5000).html(percent + "% ");
        }

        try {
            progress(80, $('.prog-bar1'));

        } catch(err) {

        }
   }).trigger('resize');
});

Triggering the resize event after you bind the handler to it will make sure that the code is run on page load.

call a function when window resize

2 Answers2