0

私のページの右側には、スポンサーのリストがあります。

私のアクティブなページ領域 (左側) の高さは、毎回含まれるストーリーに応じて、ページごとに異なります。

リストの高さをライブ ページの高さと一致させたいので、メイン スポンサーは常に表示し、残りのスポンサーについては非表示にして、毎回できる限り正確に表示することにしました。

私のマークアップは次のようになります。

<div id="xorigoi">
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/1.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/2.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/3.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/4.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/5.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/6.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/7.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/8.png"></a>
</div>

すべての画像は、各スポンサーのサイトへのリンクです。すべての画像には独自の高さがあります。

クラスを持つ要素は、.restを使用して隠されていますdisplay: none

新しい画像を追加するとリストがページより長くなるかどうかを計算しようとしていますが、要素が非表示になっているため、offsetHeight = 0.

私に何ができる？

これまでの私のjavascript/jqueryコードは次のようになります:

$(
function(){
var containerHeight = $('#mainPageContainer')[0].offsetHeight; // total height of page
var xorigoi = $('#mainRightSide .rest'); // select the sponsors
var newHeight = 1062; // this is the right side height I am already using
$.each( xorigoi , function( index ){
if( newHeight + heightOfNewElement > containerHeight ){
return false; // break each
}
xorigoi.eq(index).css('display','block'); // display the sponsor
newHeight = newHeight + heightOfNewElement;
})
}
)

要するに、上記の関数で heightOfNewElement を取得するにはどうすればよいですか?

4

3 に答える 3

5

JavaScript はシングルスレッドであるため、ブラウザは実行中に再描画しません。そのため、要素を に安全に設定しdisplay:block、それらを測定してから再度非表示にすることができ、ユーザーは賢明ではありません。

于 2012-11-29T04:33:14.447 に答える
1

noneを表示する代わりに、要素をビューポートの外に移動することを検討できます。例えば：

.rest {position:absolute;top:-9999px;}
于 2012-11-29T05:47:50.793 に答える
1

これがあなたを助けると思います。

console.log(getDimensions($('#myElement')));

function getDimensions(element){
    var tempElement = $(element).clone();
    $(tempElement).css('display','block').css('visibility','hidden');
    $(document.body).append(tempElement);
    var obj = new Object();
    obj.width = $(tempElement).width();
    obj.height = $(tempElement).height();
    $(tempElement).remove();
    return obj;
}
于 2012-11-29T04:36:22.123 に答える