Как надежно получить размеры двух элементов при загрузке страницы

Question

Скажем, у меня есть элемент «контейнер», который имеет overflow:auto, с внутренним «содержимым». Высота контейнера представляет собой процент от высоты окна, а содержание может быть любой высоты:

<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... 
    }; 
}); 

, если заявление никогда не работает, потому что две высоты всегда вычисляются как равных - даже тогда, когда я знаю, что это не так. Последующие проверки всегда показывают фактические размеры.

Так что я подумал: возможно, элементы не закончили рендеринг (я использую @ 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] для обоих ожидаемых значений.

Вкратце - как я могу получить фактические визуализированные размеры двух элементов?

Answer 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