Javascript to resize container based on height of multiple absolutely positioned child elements

Question

I'm using js-graph.it (http://js-graph-it.sourceforge.net/index.html) to create a visual representation of a workflow which is created by the end user of the application. I've got a lightbox (Fancybox) popup to display the process map and all works well. However, the steps are all absolutely positioned elements and as such I am unable to set the container's height since there could be any number of rows of elements.

So my question is, is there any way to calculate the total height of absolutely positioned elements and then use that value to update the height for the container element?

I realize that relative positioning/floats would be better but unfortunately that's not an option with js-graph-it since it needs absolute positioning to draw the connecting arrows.

Here's a JSFiddle of what I'm dealing with: http://jsfiddle.net/db3ef/1/ and since code is required, all the HTML is created by PHP so here's how I set it to display 4 items in a row and calculate the absolute positioning:

    <?php
    if ($steplist) {
        $oddcounter = 0;
        $evencounter = false;
        $row = 1;
        foreach ($steplist as $step) {
            if (is_int($oddcounter)) {
                $oddcounter++;
                $counter = $oddcounter;
            }
            else {
                $evencounter--;
                $counter = $evencounter;
            }
            if ((is_int($oddcounter) && $oddcounter > 0 && ($oddcounter % 5 == 0)) || (is_int($evencounter) && ($evencounter == 0))) {
                $row++;
                if ($row & 1) { // Odd row
                    $evencounter = false;
                    $oddcounter = 1;
                    $counter = $oddcounter;
                }
                else { // Even row
                    $evencounter = 4;
                    $oddcounter = false;
                    $counter = $evencounter;
                }
            }
            $x = ($counter - 1) * 280;
            $y = ($row - 1) * 100;
            // Set status classes
            switch ($step['status']) {
                case 1:
                    $statusclass = ' active';
                    break;
                case 2:
                    $statusclass = ' complete';
                    break;
                case 0:
                    $statusclass = ' pending';
                    break;
            }
            $map .= '<div class="block draggable' . $statusclass . '" id="step' . $step['pgsid'] . '" style="left:' . $x . 'px; top:' . $y . 'px;"><p><strong>' . stripslashes(neat_trim($step['stepname'], 50, '...')) . '</strong><br />';
            $map .= $step['assignee'] . '<br />';
            ($step['enddate'] != '') ? $map .= date('n/j/Y g:ia', strtotime($step['enddate'])) . '</p></div>' : $map .= '</p></div>';
            if (isset($step['links'][0])) {
                foreach ($step['links'] as $connection) {
                    $connectors .= '<div class="connector step' . $step['pgsid'] . ' step' . $connection . '">
                        <img src="/images/arrow.png" class="connector-end">
                        </div>';
                }
            }
        }
    }

Thanks in advance!

Answer 1

Whats the problem?

The $y Variable at the end of your loop contains the total height if you add the height of one element, which is in your case 68pixel (4.6875em)

Just print it out e.g. into a javascript variable.

echo '<script type="text/javascript">totalHeight = '.($y+68).';</script>';

Answer 2

position() and outerHeight() for the bottommost positioned element imply the height of the container; the just set it with height() or css('min-height: …').

Outputting the sum in PHP might work but remember PHP is "blind" to what actually shows on the client; maybe have PHP "guess" the height and then finish it in javascript.