Question

I’m attempting to use JS and PHP to dictate whether or not some navigation is visible or not. First, I get the cumulative height of a series of images. Then I compare this height to the height of their container. If the height of the images is greater, the navigational divs should display.

This almost works, but for some reason, my JS variable ‘divheight’ isn’t gathering the image heights. Can anyone spot my issue?

Note that $count is the number of images, and #th_ will amount to the ID of the final image.

<script>
    $('#th_<?php echo $count; ?>').ready(function() {
        var divheight = 0;
        //alert('Number of images: <? echo $count; ?>');
        <?php
        $msg = '';
        for ( $i = 1; $i <= $count; $i++ ) {
            ?>//alert('Cumulative height of images: 'divheight); <?
            //$msg .= 'divheight += parseInt( $("#th_' . $i . '").height() );';
            $msg .= 'divheight += parseInt( document.getElementById("th_' . $i . '").height );';// . "\n";
        }
        echo $msg;
        ?>
        //alert( '<? echo $msg; ?>' ); 
        alert( divheight + ':' + $('#ThumbContainer').height() );
        if ( divheight < $('#ThumbContainer').height() ) {
            $("#ProdDetailsHoverUp").hide();
            $("#ProdDetailsHoverDown").hide();
        }
    });
</script>   

Note, I’ve used both JQuery and the DOM method for getting the height of the images.

Thanks in advance for your help.

Answer 1

According to the jQuery documentation, you cannot attach a ready event to anything else but the “document” and you should use .load() instead.

But depending on the application of the actual script, you’ll need to wait for all the images to load before you can safely use the height value for each image, as it will be zero if the image has not loaded. DOM begin ready at that stage will not help you.