Question

I have an image in a that is larger than the . So I want to
be able to scroll vertically and horizontally. But I can only seem to
get it to scroll vertically. What am I missing here?

<script type="text/javascript"> 
var myScroll; 
function loaded() { 
        myScroll = new iScroll('transit_map', {vScrollbar:true}); 
} 

document.addEventListener('DOMContentLoaded', loaded); 
</script> 

<div id="transit_map_wrapper"> 
        <div id="transit_map"> 
                <img src="<?php echo base_url(); ?>extras/img/parade_route.jpg" 
width="1583" height="485" onload="scroll.refresh()" /> 
        </div> 
</div> 

And here’s my CSS:

#transit_map_wrapper { position:relative; z-index:1; width:auto; 
height:490px; overflow:hidden; } 

Any ideas?

Answer 1

I have used a jQuery plugin called imagetool and found it worked very nice on the iPhone and iPad.

http://code.google.com/p/jquery-imagetool/downloads/detail?name=jquery.imagetool-1.1.min.js&can=2&q=