cesarcarlos cesarcarlos - 4 months ago 30
jQuery Question

JQuery CSS Height setting not working on Chrome/Safari

We have a list of items that are presented on our site in table style. Depending on how many items appear on the list, the height of the table will change (number of items changes depending on the day of the week). To the left of this list table there is a vertical bar which should be resized to the appropriate height depending on how all the table is each day.

This is the HTML we are using:

<div class="tv_guide">
<div class="shows_bar_title"></div>
<div class="tv_guide_contents">
<!--The contents are generated dynamically with a PHP loop-->
<div class="guide_slot">
<!-- one guide_slot per item -->
</div>
</div>
<div class="clearFloat"></div>
</div>


So basically we are using jQuery to check what the CSS height of .tv_guide_contents is and then using that value to set the height of .shows_bar_title.

var playlistHeight = $('.tv_guide_contents').css('height');
$('.shows_bar_title').css('height', playlistHeight);


The problem is that in Chrome, playlistHeight has a value which is higher than what it really is. For example, if the height of tv_guide_contents is 1932px, the value of playlistHeight appears as 2012px and thus the title bar is higher. However, if I go to the Chrome console and type

$('.tv_guide_contents').css('height');


I do get 1932px. It also shows 1932 in the box model view.

Why am I getting a higher value when I set the playlistHeight variable? This does not happen on Firefox, the title bar is resized correctly there.

Thanks for your help.

Answer

Maybe you sholud execute the script after load all page content. Use .load() function to do this:

 $(window).load(function() {
    var playlistHeight = $('.tv_guide_contents').css('height');
    $('.shows_bar_title').css('height', playlistHeight);
 });
Comments