Question

I’m developing a site and fairly new to jquery. For some reason, when I use the .css() function on one div, it won’t change the height. It works on another div but not this one. Here is a link to the website:

http://dev.djrefine.com/epic/index111.html

To activate the function in question, open any article by clicking a grey box, then click the white “close” box in the top right corner.

and the code in question is on line 506 which is the sixth line in this snippet:

        var $wWidth = $(window).width();
        var $wHeight = $(window).height();

        var $newheight = Math.round($wHeight * 0.8 - 200) + 'px';

        $('#container').css('height',$newheight);

        $('#theThing').html($newheight);
        $('#thisThing').html($('#container').css('height'));

        $('#makeMeScrollable').css({'height':$wHeight * 0.8 - 200,'width':$wWidth - 260});

the div #makeMeScrollable is correctly adjusting its css, but the #container div is not.

The div #theThing and #thisThing are just showing that the $newheight is the correct number, but the container height is not being set to equal that number, as you can see in the demo page

also I’ve tried to have $newheight not rounding, not adding ‘px’ on the end, and every other variation I could think of…

Answer 1

Found a fix..

    setTimeout(function(){
        $('#container').css('height',$newheight);
        $('#thisThing').html($('#container').css('height'));
        $container.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
        $container.isotope( 'reLayout' );
        }, 0);

thanks goes to Alex Sexton’s answer at this post:

recalculate element height in jQuery after class change

It basically delays the stuff in the timeout 0 seconds, but having it there forces them to wait until the rest of the function is finished. I don’t know WHY it’s necessary, but it worked.