ブレークポイントに達するとFire jQuery

Question

私は複数のブレークポイントを持つレスポンシブデザインを持っています。コンテンツ内のブロックディメンションの一部は、jQueryを使用して計算されます。ビューポートが変更されると、これらの寸法が変化し、計算が実行されます。参照要素のディメンションが変更された場合、これらのイベントをどのように発生させることができますか？ブレークポイントを超えると、参照要素が変化します。

私は "orientationchange"イベントを見ましたが、必要な結果が得られていません。

Answer 1

あなたは非常に具体的でコードは提供していないので、私たちができることは非常に一般的です。

通常、.resize()イベントハンドラをインストールし、含まれるウィンドウのサイズ変更ごとに結果の寸法が変更されてレイアウトを再計算して変更する必要があるかどうかを確認します。

$(window).resize(function(e) { 
    // check dimensions here to decide if layout needs to be adjusted 
}); 

jQueryのモバイルはまた、あなた"portrait"や"landscape"などe.orientationを与えるこのようなorientationchangeイベントをサポートしています。

$(window).on("orientationchange", function(e) { 
    // check dimensions here to decide if layout needs to be adjusted 
}); 

他のページ内の特定の要素にサイズ変更を見てのためのDOMのイベントはありませんwindowオブジェクトです。その代わりに、他のイベントが発生した場合、ウィンドウのサイズ変更、方向の変更、またはページ内の他のアクション（ボタンを押すか何かをクリックするなど）など、要素のサイズが変更される可能性があります。例）。次に、他のイベントが発生して処理されると、ターゲット要素のサイズを確認し、変更されたかどうかを確認できます。

---

ここでサイズが変更停止したときにのみサイズ変更について説明しますので、resizeイベントをデバウンスjQueryプラグインです：

(function($) { 
    var uniqueCntr = 0; 
    $.fn.resized = function (waitTime, fn) { 
     if (typeof waitTime === "function") { 
      fn = waitTime; 
      waitTime = 250; 
     } 
     var tag = "resizeTimer" + uniqueCntr++; 
     this.resize(function() { 
      var self = $(this); 
      var timer = self.data(tag); 
      if (timer) { 
       clearTimeout(timer); 
      } 
      timer = setTimeout(function() { 
       self.removeData(tag); 
       fn.call(self[0]); 
      }, waitTime); 
      self.data(tag, timer); 
     }); 
    } 
})(jQuery); 

作業のデモ：https://jsfiddle.net/jfriend00/k415qunp/

使用例：

は

$(window).resized(function() { 
    // put code here to act when window stopped getting resized 
}); 

Answer 2

This pageが役に立ちます。彼らはブレークポイントに基づいてJSの実行について話し、クロスブラウザをサポートしています。基本的に、.myClass：afterの "content"プロパティを使用して隠れた擬似要素を使用します。