Question

I have a code as follows;

<div id="scroller" style="width: 50%; overflow: auto;"> 
            <iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="responses.html" /> 
        </div> 

Now I want the iframe data table to scroll within the main page on the iPad..

I have used a js on the iframe page to listen for touch events touchstart, touchmove, etc

But for some reasons these events never get fired on the iPad..

I also tried this;

var startY = 0;
    var startX = 0;
    document.addEventListener("touchstart", function (event) {
    alert(11);
        parent.window.scrollTo(0, 1);
        startY = event.targetTouches[0].pageY;
        startX = event.targetTouches[0].pageX;
    });
    document.addEventListener("touchmove", function (event) {
        event.preventDefault();
        var posy = event.targetTouches[0].pageY;
        var h = parent.document.getElementById("scroller");
        var sty = h.scrollTop;
        var posx = event.targetTouches[0].pageX;
        var stx = h.scrollLeft;
        h.scrollTop = sty - (posy - startY);
        h.scrollLeft = stx - (posx - startX);
        startY = posy;
        startX = posx;
    });

Could you please help me. Thank you…

Answer 1

1) Take out the duplicate id tag from the iframe:

<iframe height="100%" id="iframe" scrolling="no" width="100%" src="responses.html" />

2) add this to your css:

#scroller {
z-index:-1;
}

#iframe {
z-index:1;
}

and see if that has an effect. If it doesn’t you can always use AJAX.

Make sure that jquery is included on the page, then:

<script>    
$.ajax({
      url: "responses.html",
      cache: false,
      success: function(html){
        $("#results").append(html);
      }
    });
</script>

<div id="results" height="100%" width="100%"></div>