Trying to change page in a div when I swipe a finger left or right. Not up and down because one of the site I have to scroll down.
With this code I found here http://padilicious.com/code/touchevents/ I can easy change the background color by swipe left or right. But I want to load a external page in a div instead.
I have try with jquery https://www.w3schools.com/jquery/jquery_ajax_load.asp
And also basic javascript that I found here How do I load an HTML page in a <div> using JavaScript?
I have try with both use same div that the swipe code have (swipebox) but also create a new div (page) to see if it help but no luck with that.
To make sure it does happen something I did make the code to change the color of the div and it does that why I still have the background color change to see if the javascript works and it does.
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
document.getElementById("swipeBox").innerHTML='<object type="text/html" data="http://www.yahoo.com" ></object>';
swipedElement.style.backgroundColor = 'orange';
} else if ( swipeDirection == 'right' ) {
$('#page').load("http://www.google.se");
swipedElement.style.backgroundColor = 'green';
}
}
```HTML
<body>
<div id="swipeBox" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);" style="position:relative;width:100%;height:100%;">
<div id="page" style="width:100%;height:100%;"></div>
</div>
</body>
That I trying to do is when I swipe finger to the left it open a page in fullscreen in the div and when I swipe my finger to the right it open another page
