Home/ Questions/Q 5944299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:31:04+00:00

I have a DIV container in which I have a SVG document (bigger than

  • 0

I have a DIV container in which I have a SVG document (bigger than DIV). In this same container I have another DIV (lets call it DIV#2) that moves over my SVG, to help people locate some feature. When I scroll the container DIV I would like DIV#2 to stay anchored on the same position on my SVG, so as to be coherent my the new position of the selected feature (cf Rect_Follow() function below).

Can someone help me troubleshooting that without the use of jQuery?

Here’s a small portion of the code:

CSS:

<style type="text/css"> 
<!--
    div.SVG_container {
        height:800px;
        width:900px;
        margin-top:250px;
        overflow:scroll;
    }

    div.select_div {
        position: absolute;
        height: 98px;
        width: 98px;
        background: #CCF;
        border: 1px solid #AAD;
        text-align: center;
        font-size: 10px;
        border:1px solid black;      
        filter:alpha(opacity=60); /* for IE */
        opacity:0.6; /* CSS3 standard */    
    }   
-->
</style>

HTML/JavaScript:

<head>
    <!-- ... -->
    <script type="text/javascript">
        function Rect_Follow(obj){
            var rect = document.getElementById('arect');    
            rect.style.top = obj.scrollTop;       
        }
    </script>
</head>
<body bgcolor="white">
    <div id="DivCont" class="SVG_container" onscroll="Rect_Follow(this)">
        <div id="arect" name="arect" class="select_div"></div>  
        <object id="aSVG" data="out.svg" style="margin-top:0px;overflow:hidden;" /> 
    </div>
    <!-- ... -->
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add position:relative to .SVG_container, and remove the JavaScript.

    I hope this is what you mean.

    • 0