jquery touch swipe over iframe

Question

I am trying to put together a small application where i can swipe anywhere on the screen.

This was all ok until I wanted to add an iframe to a section of the page. I want to be able to be able to know when a swipe has occured when people are over this area. Is this possible?

So an idea where #box is the swipeable area

<div id="box">

<div id="left">
    <h1></h1>
    <p> this is some text</p>
</div>

<div id="right"> 
  <iframe src="anyurl" frameborder="0" height="430"></iframe>     
</div>

I have put together a basic jsfiddle that might help show what I mean

http://jsfiddle.net/dwhitmarsh/v42S9/

Answer 1

personally I would use a div to cover the iframe.

var maxTime = 1000,
    // allow movement if < 1000 ms (1 sec)
    maxDistance = 50,
    // swipe movement of 50 pixels triggers the swipe
    target = $('#box'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

target.bind(startEvent, function(e) {
    // prevent image drag (Firefox)
    // e.preventDefault();
    startTime = e.timeStamp;
    startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
    startTime = 0;
    startX = 0;
}).bind(moveEvent, function(e) {
    // e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
        if (currentX < startX) {
            // swipe left code here
            target.find('h1').html('Swipe Left').fadeIn();
            setTimeout(function() {
                target.find('h1').fadeOut();
            }, 1000);
        }
        if (currentX > startX) {
            // swipe right code here
            target.find('h1').html('Swipe Right').fadeIn();
            setTimeout(function() {
                target.find('h1').fadeOut();
            }, 1000);
        }
        startTime = 0;
        startX = 0;
    }
});

h1 {
    text-align: center;
    font-size: 24px;
}
#box {
    width: 800px;
    height: 600px;
    margin: 30px auto;
    background-color:#eee;
}
#left{ position:relative; float:left; width:40%;
}
#right{  position:relative; float:left; width:40%; }

#right .iframe_cover{
  position: absolute;
  width: 100%;
  height: 40%;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Swipe Inside the Box</h1>
<div id="box">
    
    <div id="left">
        <h1></h1>
        <p> this is some text</p>
    </div>
    
    <div id="right"> 
      <iframe src="https://lnt.org/" frameborder="0" height="430"></iframe>
      <div class="iframe_cover"></div> 
    </div>
</div>

NB: if you need to be able to click or scroll or click inside the iframe then, you should capture the scroll or click event on this cover and apply it to the iframe.