Das Werkstatt

Posted: **Thu Sep 16, 2010 3:01 pm**

Here's my code for synchronizing horizontal scrolling of multiple graphs within iframes:
(It's a mix between PHP and javascript)

Code: Select all

<html>
    <head>
        <script type="text/javascript">
            var frame_count = <?=count($_graphs)?>;
            var master_graph = "graph_0";

            function init_scroll()
            {
                var frame = document.getElementById(master_graph).contentWindow;
                frame.onscroll = function ()
                {
                    scroll_sync();
                }
            }

            function scroll_sync()
            {
                var frame = document.getElementById(master_graph);
                var x = frame.contentWindow.pageXOffset;

                for (i=1; i<frame_count; i++)
                {
                    document.getElementById("graph_" + i).contentWindow.scrollTo(x, 0);
                }
            }
        </script>
    </head>

    <body OnLoad="init_scroll();">
    <?php foreach ($_graphs as $index=>$graph): ?>
        <iframe name="graph_<?=$index ?>" id="graph_<?=$index ?>"
                src="<?=$graph ?>" frameborder="0"
                scrolling="auto" width="100%" height="320"></iframe>
    <?php endforeach; ?>
    </body>
</html>

Das Werkstatt

Example code

Example code