Start a new topic

How to add an eventlistener on a certain part of a screen using javascript

How to add an eventlistener on a certain part of a screen using javascript
1 Comment


I was wondering if you can assign an event listener on a certain part of a mobile phone screen? For example just 90% of the screen only. I have an bottle that will spin regarding of the direction of the swipe. I have a button on the bottom of the screen that when is clicked, will go back two pages. However, when I click the button, the "click" is not triggered, instead the eventlistener is always triggered. Here is my code.Thanks.

 

index.html

 


<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,  user-scalable=no">

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> -->

    <title>Hello Wikitude</title>

 

<script src="architect://architect.js"></script>

    <script type="text/javascript" src="ade.js"></script>

    <link rel="stylesheet" href="default.css">

  </head>

  <body>

  

    <!-- <div id="loadingMessage" class="info">Loading ...</div>-->

    <!--  <div id="squareBracket"  class="middle" ><img width='100%' src='squarebracket.png'></div> -->

    <!-- onclick="document.location = 'architectsdk://actionButton?action=SpinTheBottleToMenu';"  -->

<div id="backButton" class="bottom" onclick="document.location = 'architectsdk://actionButton?action=SpinTheBottleToMenu';"><img width='25%'src='backbutton.png'></div>

 

    <script src="js/spinThebottle.js"></script>

    

  </body>

</html>

 

spinThebottle.js


var startX,startY,endX,endY;

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

var firstSwipe = false;

var alreadyswiped = false;

var isSeen = false;

var World = {

loaded: false,

 

init: function initFn() {

/* Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.*/

AR.context.services.sensors = false;

this.createOverlays();

},

 

createOverlays: function createOverlaysFn() {

// Initialize Tracker

// Important: If you replace the tracker file with your own, make sure to change the target name accordingly.

// e.g. replace "pageOne" used for creating the AR.Trackeable2DOBject below, with the name of one of your new target images.

this.tracker = new AR.Tracker("SpinTheBottleTarget.wtc", {

//onLoaded: this.worldLoaded

});

 

// Create overlay for page one

var imgOne = new AR.ImageResource("fruitsarrow.png");

var overlayOne = new AR.ImageDrawable(imgOne, 1, {

zOrder: 0,

scale: 1.55,

offsetY: -0.03,

});

 

var imgTwo = new AR.ImageResource("sanmigbottle.png");

var overlayTwo = new AR.ImageDrawable(imgTwo, 1, {

zOrder: 1

});

 

 

 

var pageOne = new AR.Trackable2DObject(this.tracker, "spinthebottle", {

drawables: {

cam:

},

 

   onEnterFieldOfVision: function onEnterFieldOfViewFn () {

   

    swipeFunc.init(true);

   

   

   },

   

   onExitFieldOfVision : function onExitFieldofViewFn (){

 

    swipeFunc.init(false);

   

   }

});

 

 

 

this.rotationAnimationstartRight = function rotation(){

var rotate;

if(swipeFunc.touches.touchmove.y < h / 2){

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

} else if(swipeFunc.touches.touchmove.y > h / 2)

{

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

}

}

this.rotationAnimationstartLeft = function rotation(){

var rotate;

if(swipeFunc.touches.touchmove.y < h / 2){

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

} else if(swipeFunc.touches.touchmove.y > h / 2)

{

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1440, 4000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

}

}

 

this.rotationAnimationRightOne = function rotation(){

var rotate;

if(swipeFunc.touches.touchmove.y < h / 2){

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1591, 3500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

 

} else if(swipeFunc.touches.touchmove.y > h / 2)

{

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1839, 4500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

}

 

}

this.rotationAnimationLeftOne = function rotation (){

var rotate;

if(swipeFunc.touches.touchmove.y < h / 2){

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll - 1501, 4500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

} else if(swipeFunc.touches.touchmove.y > h / 2)

{

rotate = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, overlayTwo.roll + 1350, 3500,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

rotate.start(1);

}

}

}

};

 

 

var swipeFunc = {

touches : {

"touchstart": {"x":-1, "y":-1}, 

"touchmove" : {"x":-1, "y":-1}, 

"touchend"  : false,

"direction" : "undetermined"

},

touchHandler: function(event) {

var touch;

if (typeof event !== 'undefined'){

event.preventDefault(); 

if (typeof event.touches !== 'undefined') {

touch = event.touches;

switch (event.type) {

case 'touchstart':

case 'touchmove':

swipeFunc.touches.x = touch.pageX;

swipeFunc.touches.y = touch.pageY;

break;

case 'touchend':

swipeFunc.touches = true;

if (swipeFunc.touches.touchstart.x > -1 && swipeFunc.touches.touchmove.x > -1) {

swipeFunc.touches.direction = swipeFunc.touches.touchstart.x < swipeFunc.touches.touchmove.x ? "right" : "left";

 

// DO STUFF HERE

 

if(swipeFunc.touches.direction == "right" && isSeen === false){

World.rotationAnimationstartRight();

isSeen = true;

swipeFunc.touches.direction = "undetermined";

}

 

 

if(swipeFunc.touches.direction == "left" && isSeen === false){

World.rotationAnimationstartLeft();

isSeen = true;

swipeFunc.touches.direction = "undetermined";

}

 

if(swipeFunc.touches.direction == "right" && isSeen === true){

World.rotationAnimationRightOne();

swipeFunc.touches.direction = "undetermined";

}

if(swipeFunc.touches.direction == "left" && isSeen === true){

World.rotationAnimationLeftOne();

swipeFunc.touches.direction = "undetermined";

}

 

}

default:

break;

}

}

}

},

init: function(willAppear) {

if(willAppear === true){

document.addEventListener('touchstart', swipeFunc.touchHandler, false);

document.addEventListener('touchmove', swipeFunc.touchHandler, false);

document.addEventListener('touchend', swipeFunc.touchHandler, false);

}else if( willAppear === false){

document.removeEventListener('touchstart', swipeFunc.touchHandler, false);

document.removeEventListener('touchmove', swipeFunc.touchHandler, false);

document.removeEventListener('touchend', swipeFunc.touchHandler, false);

}

 

 

 

}

};

 

 

World.init();

 

Login or Signup to post a comment