Jquery touch swipe iframe
I am trying to put together a small application where I can scroll anywhere on the screen.
Everything was fine until I wanted to add an iframe to a section of the page. I want to be able to know when the click occurred when people are over this area. Is it possible?
So the idea where #box is a scrolling 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've put together a basic jsfiddle that might help show what I mean
+3
source to share
1 answer
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 click or scroll or click inside an iframe then you have to capture the scroll or click event on that skin and apply it to the iframe.
+1
source to share