0

jQueryスクリプトを使用して2つのdivの高さを調整しようとしています。divの1つに動的コンテンツが含まれるまで、すべてが正常に機能します。次のようなdivの1つに静的コンテンツをハードコーディングすると、次のようになります。

<br>asd<br>asd<br> x 20

両方のdivのheightプロパティは同じですが、DBからいずれかのdivにデータをロードすると、それらは異なります。

問題は.ready（）リスナーにあると思います。ドキュメントには、DOMが完全にロードされたときに起動すると書かれていますが、それは真実ではないようです。

私の質問は、どのようなリスナーまたは他の「トリック」を使用する必要があるかということです。jquery / javascriptソリューションはcssをいじるよりもクリーンだと思うので、この種のソリューションが欲しいです。

前もって感謝します。

jqueryスクリプト：

$(document).ready(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});
4

2 に答える 2

2

基本のjqueryはイベントdocument.readyで動作します。これは、ここまですべてのDOMの準備ができたときにjqueryコードを作成することを意味します。jqueryライブラリをレンダリングせずにjqueryコードをレンダリングするオプションがないためです

すべてのdomがロードされたときにイベントを追加する場合は、これを行う必要があるコンテンツと画像を含めます

$(document).ready(function(){
$(window).load(function(){
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }   
});
});
于 2013-01-28T13:45:58.153 に答える
0

Webページが画像、スクリプトファイル、CSSファイルなどを含むすべてのコンテンツを完全にロードしたら、window.onloadを使用してスクリプトを実行できます。

window.onload = function() {
    var difference = $("#layout-navigation-wrapper").height() - $("#layout-content-wrapper").height();

    if(difference<0)
    {
        var height = $("#layout-content-wrapper").height() -1;
        $("#layout-navigation-wrapper").height(height);
    }
    else if(difference >= 0)
    {
        var height = $("#layout-navigation-wrapper").height() -2;
        $("#layout-content-wrapper").height(height);

    }
};
于 2013-01-28T13:57:32.800 に答える