web-dev-qa-db-ja.com

レスポンシブEqual Heightブロックが連続する-IE8で問題あり

要件：行の高さブロックが等しい

私は、さまざまなページdivの高さを等しくする必要があるデザインの多くのjoomlaサイトで作業しています。 CSS Tricksには良い例があります ブロックの複数の行の高さを揃えて均一にする方法の例です。ただし、CSSトリックの例では、すべてのdiv /ブロックが共有クラスを持つ同様の要素になると想定しています。 .blocks。

共通のクラスがなく、ページ上のいくつかの異なる要素を取り、それぞれの高さを等しくすることができる関数が必要でした。だからこれは私が書いたものです：

//EQUAL HEIGHT
equalHeight = function(container1, container2, container3) {

    var mainBlock = container1;
    var secondBlock = container2;
    var thirdBlock = container3;

    // in case the div heights have already dynamically changed,
    // reset the div heights back to their true markup values
    $(mainBlock).css('height','auto');
    $(secondBlock).css('height','auto');
    $(thirdBlock).css('height','auto');

    var highestBlock = 0;

    // determine which is the tallest block before doing anything
    $(mainBlock).each(function(){  
        if($(this).height() > highestBlock){  
            highestBlock = $(this).height();  
        }
    });    

    // Now apply the tallest block value to the heights of all relevant divs
    $(mainBlock).height(highestBlock);
    $(secondBlock).height(highestBlock);
    $(thirdBlock).height(highestBlock);
}

//EQUAL HEIGHT USAGE EXAMPLE
equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');


問題

この関数は思い通りに機能しますが、(window).resizeで呼び出すと、特にIE8で問題が発生します。私のサイトは反応がよく、ブラウザーウィンドウのサイズが変更されたら、divの均等化された高さを再調整する必要があります。これは他のブラウザーでも問題なく動作するようですが、 IE8がサイズ変更イベントを処理する方法のため の場合、サイズ変更イベント内でequalHeight関数を呼び出すと、無限ループがトリガーされ、ブラウザーがクラッシュします。

質問

上記を踏まえ、パフォーマンスを犠牲にすることなく、IE8でサイトが同じサイズのブロック/ divを持つことができることをどのように保証しますか？ (window).resizeイベントの使用を避けたいのですが、優れた代替案が見つかりませんでした。 equalHeight関数を呼び出すのに適した時間と場所はありますか？ equalHeight関数自体に欠けている欠陥はありますか？私が検討する余地がない唯一の解決策は、「サイトのデザインを変更する」ことです。これは私が制御できるものではないためです。

jqueryjavascriptresponsive-web-design
1
Candlejack

まず、respond.jsを使用していると思いますか？ IE8を応答性の高いものにする優れたツールです。

https://github.com/scottjehl/Respond

ジューシーさのために。イベントを「スロットル」するだけで済みます。

var throttleTimeout = false,
    throttleTime = 2000; //2 seconds
function throttleHeight(event){
   if(!throttleTimeout){ //check if throttle variable is false
      throttleTimeout = setTimeout(function(){ //set a timeout
         equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');
         throttleTimeout = false; //reset variable
      },throttleTime);
      throttleTimeout = true;
   }
}
jQuery(window).resize(throttleHeight);

これにより、equalHeightは2秒ごとに実行されることができなくなります。タイムアウトがクリアされない限り、実行されないためです。テストされていませんが、アイデアを始めるのに十分なはずです。

1
Jordan Ramstad

私が検討する余地がない唯一の解決策は、「サイトのデザインを変更する」ことです。これは私が制御できるものではないためです。

これは、断然、最善の解決策です。

高さの等しいカラムを使用することは、機能性にまったく影響を及ぼさない、純粋に美的な決定です。このように、これは漸進的強化の原則とともに追加されるべき動作です。それをサポートすることができるブラウザのために持っている素晴らしい。

最悪の場合のフォールバックのシナリオは、IE8ユーザー（2.1％と-- http://www.w3schools.com/browsers/browsers_Explorer.asp ）がすべてのコンテンツとすべての機能を取得することです、高さが同じ列は表示されません。世界の終わりはほとんどありませんか？ IE8のユーザーは決して気付かないでしょう。

責任あるウェブデザイナーとしてのあなたの仕事の一部は、ウェブ上で何が可能で、何が不可能であるか、望ましくないかをクライアントに教育することです。彼らはおそらくそのようなことをすることが悪い考えである理由を知らない、彼らはウェブデザイナーではない。

0
Seth Warburton