1

適用された 'height' css プロパティを無視した場合、ページ上の要素の高さを取得するにはどうすればよいですか?

私が取り組んでいるサイトはhttp://www.wncba.co.uk/resultsで、これまでに取得した実際のスクリプトは次のとおりです。

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

    document.origContentHeight = $("#auto-resize").outerHeight(true);
    refreshContentSize(); //run initially
    $(window).resize(function() { //run whenever window size changes
        refreshContentSize();
    });
});

function refreshContentSize()
{       
    var startPos = $("#auto-resize").position();
    var topHeight = startPos.top;
    var footerHeight = $("#footer").outerHeight(true);
    var viewportHeight = $(window).height();    
    var spaceForContent = viewportHeight - footerHeight - topHeight;

    if (spaceForContent <= document.origContentHeight)
    {
        var newHeight = document.origContentHeight;
    }
    else
    {
        var newHeight = spaceForContent;
    }
    $("#auto-resize").css('height', newHeight);
    return; 
}

[ http://www.wncba.co.uk/results/javascript/fill-page.js ]

私がやろうとしているのは、メイン ページのコンテンツを拡大してウィンドウを埋めることです。これにより、緑色の線が常にページの下まで流れ、「有効な HTML5」および「設計者」のメッセージがページの下部より上に表示されることはありません。窓。フッターを一番下に貼り付けたくありません。上に入力するのに十分なコンテンツがない場合は、ページを上に移動するのではなく、そこにとどまることを望んでいます。また、ブラウザ ウィンドウのサイズが変更された場合にも、それに応じて適応する必要があります。

これまでに取得したスクリプトは機能しますが、修正したい小さな問題があります。現時点では、ページのコンテンツが動的に変化する (ページが長くなったり短くなったりする) 場合、スクリプトはこれを検出しません。変数document.origContentHeightは古い高さとして設定されたままになります。

要素の高さを検出する方法はありますか (例では #auto-resize など)、CSS で設定された高さを無視して変更されたかどうかを確認する方法はありますか? 次に、これを使用して変数を更新しdocument.origContentHeight、スクリプトを再実行します。

ありがとう。

4

2 に答える 2

0

プラグインを使用する以外に、要素のサイズが変更されたことを検出する方法はないと思います。

$(element).resize(function() //only works when element = window

refreshContentSizeしかし、ページの変更時に関数を動的に呼び出さないのはなぜですか?

このjsFiddle DEMOを見てください。私の言いたいことが理解できます。

または、Jquery-resize-pluginを使用できます。

于 2012-05-11T15:40:29.497 に答える
0

私はそれが働いている。少し考え直す必要がありました。解決策はライブサイトにあります。

できれば変えたいと思うのは、

setInterval('refreshContentSize()', 500); // in case content size changes

500msごとにチェックせずにテーブル行のサイズが変更されたことを検出する方法はありますか? 試してみ(#content).resize(function()ましたが、動作させることができませんでした。

于 2012-05-12T15:04:04.823 に答える