jQueryは要素の高さを動的に変更します

私は流体レイアウトプロジェクトに取り組んでいます。私は私の書類にいくつかの固定された高さのDIVを持っていて、その高さはすべて異なっています。私は比例的にブラウザのサイズ変更でこれらのDIVの高さを変更する必要があります。ここにマークアップがあります。jQueryは要素の高さを動的に変更します

<body> 
<div id="a" class="target"></div> 
<div id="b" class="target"></div> 
<div id="c" class="target"></div> 
</body>

とCSS：

<style> 
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; } 
    #a { height: 200px; background-color: yellow;} 
    #b { height: 400px; background-color: green;} 
    #c { height: 600px; background-color: grey;} 
</style>

は簡単ですね！主な条件は、私ははターゲットDIVとそのIDのprecize量を知っていないので、私は.each（function（））を使用している理由です。ここにスクリプトを書いてあります。

$(document).ready(function(){ 
//set the initial body width 
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/ 
$(".target").each(function() 
{ 
    //get the initial height of every div 
    var originalHeight = $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 
});

}）;

このスクリプトは、ユーザーがページを再読み込みすると完全に機能します。ユーザーがリロードせずにブラウザのサイズを変更したときに、どのように同じ結果を得ることができますか？私は$（window）.resizeイベントリスナを適用するべきであることを知っています。しかし問題は、DIVの初期の高さがイベントの中で計算され、結果が無限ループのようなものになることです。つまり、最終的な高さは巨大な進行で増減します。私はそれを必要としません！どうすればをそれぞれ DIVの初期高さ計算の外にイベント関数として作成し、これらの高さをイベント関数内で使用できますか？または、同じ結果を得るために別の方法があるかもしれませんか？

出典

2012-06-16 theCoder

各divの元の高さを保存する必要があります。いろいろな方法がありますが、ここでは1つのハックをDOMノード自体に格納しています（より良い方法がありますが、これはすばやく汚れています）。

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    /*I need to go through all target divs because i don't know 
    how many divs are here and what are their initial height*/ 


    function resize() { 
    //This will only set this._originalHeight once 
    this._originalHeight = this._originalHeight || $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = this._originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 

    } 

    $(".target").each(resize); 
    $(document).resize(function(){ 
     $(".target").each(resize); 
    }); 
});

出典

2012-06-16 17:45:39

Realy quick and easy solution。完璧に動作します。ありがとう！ – theCoder

はあなたのサイズ変更機能をラップし、イベントのサイズを変更するウィンドウを購読するjQueryの

http://api.jquery.com/resize/

出典

2012-06-16 17:40:59 Nir

と結合することができ、resizeイベントを見てみましょう。

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    resizeTargets(); 
    $(window).resize(resizeTargets); 

}); 

function resizeTargets() 
{ 
    $(".target").each(function() 
    { 
     //get the initial height of every div 
     var originalHeight = $(this).height(); 
     //get the new body width 
     var bodyWidth = $("body").width(); 
     //get the difference in width, needed for hight calculation 
     var widthDiff = bodyWidth - originalWidth; 
     //new hight based on initial div height 
     var newHeight = originalHeight + (widthDiff/10); 
     //sets the different height for every needed div 
     $(this).css("height", newHeight); 
    }); 
}

出典

2012-06-16 17:41:00 Gabe

使用.dataのあなたの$ .each関数内のdivの初期サイズを格納するための

$(this).data('height', $(this).height()); 
$(this).data('width', $(this).width());

後でリサイズコールバック

var old_height = $(this).data('height'); 
var old_width = $(this).data('width');

・ホープ内の古いサイズを取得することができますこれは役に立ちます

出典

2012-06-16 17:46:16

.dataを使って動作させることはできません。しかし、それは私のせいかもしれない、私は非常に少ないjavascriptの経験がある。とにかくありがとう。 – theCoder

jQueryは要素の高さを動的に変更します

答えて

関連する問題