ウィンドウのサイズ変更時に関数を呼び出す

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イベントをトリガ

$(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メソッド。あなたがwindowオブジェクトにresizeイベントをバインドすることができ