Javascript根据多个绝对定位的子元素的高度调整容器大小

时间:2013-10-02 20:31:12

标签: javascript php graph css-position flowchart

我正在使用js-graph.it(http://js-graph-it.sourceforge.net/index.html)来创建由应用程序的最终用户创建的工作流的可视化表示。我有一个灯箱(Fancybox)弹出窗口来显示流程图,一切正常。但是,这些步骤都是绝对定位的元素,因此我无法设置容器的高度,因为可能有任意数量的元素行。

所以我的问题是,有没有办法计算绝对定位元素的总高度,然后使用该值来更新容器元素的高度?

我意识到相对定位/浮点数会更好但不幸的是,这不是js-graph-it的选项,因为它需要绝对定位来绘制连接箭头。

这是我正在处理的JSFiddle:http://jsfiddle.net/db3ef/1/并且由于代码是必需的,所有的HTML都是由PHP创建的,所以这里是我如何将它设置为连续显示4个项目并计算绝对定位:

    <?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>';
                }
            }
        }
    }

提前致谢!

2 个答案:

答案 0 :(得分:1)

问题是什么?

如果你添加一个元素的高度,你的循环结尾的$ y变量包含总高度,在你的情况下是68像素(4.6875em)

只需将其打印出来,例如进入javascript变量。

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

答案 1 :(得分:0)

最底部定位元素的

position()outerHeight()表示容器的高度;只需使用height()css('min-height: …')设置它。

在PHP中输出总和可能会有效但请记住PHP对客户端上实际显示的内容“视而不见”;也许有PHP“猜测”高度,然后在javascript中完成。