javascriptioscordovaiscroll4

Possible to use iscroll pinch/zoom with overlayed divs?

I'm trying to overlay a div ("childItem") with a specific position on top of a larger div ("parentContainer") that has a background image. I then use iscroll to allow pinch/zoom on the parent div. This works. However, the child div does not maintain its position relative to the updated zoom level of the parent div after a pinch/zoom is complete.

So basically, the background image gets zoomed, but the position of the child div does not get zoomed. Any idea on how to re-position the childItem after a zoom is complete with iscroll? Example:

<div id="parentContainer">
    <img src="map_background.png" />
    <div id="childItem" style="top:40px;left:40px;">
        <img src="map_icon.png" />
    </div>
</div>

<script type="text/javascript">
var myScroll = new iScroll('parentContainer', { zoom: true });
</script>
Solution

  • The answer was far more simple than I would have imagined. All I needed to do was wrap the image and child div in another div to get them to all scale together.

    <div id="parentContainer">
    <div>
        <img src="map_background.png" />
        <div id="childItem" style="top:40px;left:40px;">
            <img src="map_icon.png" />
        </div>
    </div>
</div>