ウィンドウ上のファンクションサイズ変更

Question

要素を同じサイズになるようにサイズ変更/イコライズする機能があります。私はDOM Ready上でその関数を呼び出し、ウィンドウのサイズ変更でも呼びたいと思っていますが、起動していないようです。 console.logは、あなたが期待しているように発火しますが、equalize()の機能はありません。

// Equalize 
var equalize = function(){ 
    var maxHeight = 0; 
    $('.equalize').each(function(){ 
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); } 
    }); 

    $('.equalize').outerHeight(maxHeight); 
}; 


jQuery(document).ready(function($) { 

    // fire equalize 
    equalize(); 

    $(window).resize(function(){ 
    equalize(); 
    console.log('[Log] Resized'); 
    }).trigger('resize'); 

}); 

それは、サイズ変更ウィンドウ上の機能を発射することになると私はここで何かが足りないのですか？ありがとう！

Answer 1

要素がサイズに合わせてコンテンツに適合するためには、スタイルoverflow : autoを設定する必要があります。そうでない場合、要素はサイズを保持してコンテンツがオーバーフローします。あなたが明示的にouterHeightを設定するとき

はまた、要素が自動リサイズ内容に合わせて停止し、autoのデフォルトの高さは、要素の高さが

var equalize = function() { 
    var max = Math.max.apply(null, 
       $('.equalize').css('height', 'auto').map(function() { 
        return $(this).outerHeight(); 
       }) 
      ); 
    $('.equalize').outerHeight(max); 
}; 


jQuery(document).ready(function($) { 
    $(window).resize(function() { 
     equalize(); 
    }).trigger('resize'); 
}); 

を比較される前に、サイズ変更にそれをだまして適用する必要があります

div{ 
    display: inline-block; 
    position: relative; 
    width: 50%; 
    float: left; 
    background: yellow; 
} 

.other{ 
    background: salmon; 
    overflow:auto; 
} 

FIDDLE

Answer 2

トリガーを取り除き、それが役立つかどうかを確認してください。 jQueryのドキュメントによれば、トリガーは偶数を呼び出します（関数を呼び出します）。

関数が呼び出された後に関数を呼び出すのは当然だとは思わないが、問題の原因になる可能性があります。

// Equalize 
var equalize = function(){ 
    var maxHeight = 0; 
    $('.equalize').each(function(){ 
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); } 
    }); 

    $('.equalize').outerHeight(maxHeight); 
}; 


jQuery(document).ready(function($) { 

    // fire equalize 
    equalize(); 

    $(window).resize(function(){ 
    equalize(); 
    console.log('[Log] Resized'); 
    }); // got rid of the trigger...not needed 

}); 

Answer 3

（少なくとも、ウィンドウサイズ変更に火災に等しく取得する）それはあなたのプロジェクトで何が起こっているのかについていくつかの詳細なしに言うには少し難しいですが、これは私の作品：

var equalize = function(){ 
    var maxHeight = 0; 
    $('.equalize').each(function(){ 
    if ($(this).outerHeight() > maxHeight) { maxHeight = $(this).outerHeight(); } 
    }); 

    $('.equalize').outerHeight(maxHeight); 
}; 


jQuery(document).ready(function($) { 
    equalize(); 

    $(window).resize(function(){ 
    equalize(); 
    console.log('[Log] Resized'); 
    }) 

});