1

overflow:auto内部に「コンテンツ」divを含む「コンテナ」要素があるとします。コンテナーの高さはウィンドウの高さのパーセンテージであり、コンテンツは任意の高さである可能性があります。

<div id="container">// Height dependent on window size
    <div id="content">
    // Arbitrary amount of content here
    </div>
</div>

要求された CSS - 私の「現実世界」のシナリオでは、コンテンツ要素は実際にはテーブルであり、以下のルールがあることに注意してください。

#container {
    height:100%;
    overflow:auto
}

#content {
    border-collapse: collapse;
    border-spacing: 0;
}

私がやりたいことは、コンテンツの高さがコンテナーの高さを超えているかどうかを確認し、真の場合は何かをすることです。

ただし、単純に行うと：

$(document).ready(function(){
    var containerH = $('#container').outerHeight();
    var contentH = $('#content').outerHeight();
    if ( contentH > containerH ) {
        // If the content's too big, do things...
    };
});

2 つの高さは常に等しいと計算されるため、if ステートメントは実行されません。その後のチェックでは、常に実際の寸法が明らかになります。

だから私は考えました：要素のレンダリングが完了していない可能性があります（@font-faceを使用して要素内のテキストのスタイルを設定しています-おそらくそれが完了するまで待つ必要があります）そして、次のようなことをしようとしました：

$(document).ready(function(){

    var container = $('#container');
    var content = $('#content');

    function getProperHeight(el){
        var height = el.load(function(){
            var h = this.outerHeight();
            return h;
        });
        return height;
    };

    var containerH = getProperHeight(container);
    var contentH = getProperHeight(content);

    console.log( containerH + ' ' + contentH )

};

これはload()メソッドを使用して取得した最も近いものですが、両方の期待値に対して [object Object] を取得します。

要するに、2 つの要素の実際にレンダリングされた寸法を取得するにはどうすればよいですか?

4

1 に答える 1

-1

あなたはこのようなことができます...

HTML

<div id="container">
  <div id="listingNav">
    <a id="back">Back </a>
    <div id="paginationNav"></div>
    <a id="next"> Next</a>
  </div>
  <div id="content">
    // Arbitrary amount of content here
  </div>
</div>

CSS

#content {
  overflow:hidden;  
}

Javascript

//set how tall you want you container to be
var divHeight = 624;

$(document).ready(function()
{
    //get the height of the container without styles
    var contentHeight = $('#content').height();
    //then add styles to the container
    $('#content').css('height', divHeight + 'px');
    //find out how many pages there will be
    var divPages = Math.ceil(contentHeight / divHeight);
    //loop through and create the page # anchors
    for(var i = 1; i <= divPages; i++)
    {
        $("#paginationNav").append('<a id="' + i + '" onclick="javascript:goToPage(this)">' + i + '</a>');
    } 
    //wrap every in #content with a div with the class of .content
    $('#content').children().wrapAll('<div class="content"/>');
    //program the paganation effect for next
    $('#next').click(function() {
        var current = ($('.content').css('margin-top') || '0px');
        if((current.substring(0,current.length-2) - divHeight) > -contentHeight)
        {
            $('.content').css('margin-top',current.substring(0,current.length-2) - $('#listingContainer').height() + 'px');
        }
    });
    //program the paganation effect for back
    $('#back').click(function() {
        var current = ($('.content').css('margin-top') || '0px');
        if(current.substring(0,current.length-2) < 0)
        {
            $('.content').css('margin-top',(current.substring(0,current.length-2) - -$('#listingContainer').height()) + 'px');
        }
    });
});
//program the paganation effect for each of the page # anchors
function goToPage(page)
{
    $('.content').css('margin-top', -((divHeight * page.id) - divHeight));
}

お役に立てれば。

ああ.....そしてこれはjquery 1.9.1を使用しています

于 2013-05-15T18:30:29.293 に答える