Question

I’m using Raphael to draw a figure. The figure is very large, so the browser window shows a scroll bar. Now I want a part of the figure to keep still even if the user moves the scroll bar. How could this be done?
In addition, I want to change the figure based on the position of the scroll bar (for example, showing the x-coordinate the scroll bar). Is this possible?
Thank you.

Answer 1

Here is the solution to my questions. To keep a part of the figure still regardless of scrolling, create two canvases, one for the part that shall move with scrolling and one for the still part. Then put the 2nd canvas in <div style="position:fixed">.
Here is the code:

<div id="part1">
    <script type="text/javascript">
        var paper1 = Raphael("part1", 1000, 200);
        // draw the figure
    </script>
</div>
<div id="part2" style="position: fixed">
    <script type="text/javascript">
        var paper2 = Raphael("part2", 1000, 200);
        // draw the figure
    </script>
</div>

Note that this code only works if the two parts of the figure are separate. I don’t know if they can still be drawn in two canvas if they overlap.

To change the figure based on the position of the scroll bar, use the following code. The getScrollX() function is adapted from the code at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow.

<script type="text/javascript">
    function getScrollX() {
        var scrOfX = 0;
        if (typeof (window.pageYOffset) == 'number') {
            //Netscape compliant
            scrOfX = window.pageXOffset;
        } else if (document.body
                && (document.body.scrollLeft || document.body.scrollTop)) {
            //DOM compliant
            scrOfX = document.body.scrollLeft;
        } else if (document.documentElement
                && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
            //IE6 standards compliant mode
            scrOfX = document.documentElement.scrollLeft;
        }
        return scrOfX;
    }

    window.onscroll = function() {
        var x = getScrollX();
        // change the figure
    }
</script>