вызов функции при изменении окна

Question

У меня есть индикатор выполнения на моей странице. Он работает, но если я изменяю размер окна, у меня проблема с его width - он не меняется.

HTML:

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

Javascript код

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) { 

    } 

Как я могу вызвать функцию при изменении размера окна?

Answer 1

Вы можете связать resize событие с window объекта:

$(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'); 
}); 

Инициирование событие изменения размера после того, как вы связать обработчик будет убедиться, что код выполняется на странице загрузки.

Answer 2

Использование windowresize() jQuery метод.