How can I stop a javascript event from firing another (different) event? - javascript

I have an onkeydown event that may or may not scroll the page, and may or may not set a variable. I would like to have an onscroll event that sets that variable to false. I do not want the onkeydown event to trigger the onscroll event. How can I do this?
edit: Added my code. It lets you use your left and right arrow keys to move up and down through the images on my page. Sorry it's so wide.
<script>
window.anImageHasBeenCentered = false;
window.onkeydown = function ( key )
{
var element = document.elementFromPoint ( window.innerWidth / 2, window.innerHeight / 2 );
if ( anImageHasBeenCentered ) // move to next image
{
switch ( window.event ? event.keyCode : key.keyCode )
{
case 37: element = element.parentNode.previousSibling.previousSibling.firstChild; break; // Left Arrow
case 39: element = element.parentNode.nextSibling.nextSibling.firstChild; break; // Right Arrow
default: anImageHasBeenCentered = false; element = null;
}
}
else // center current image
{
switch ( window.event ? event.keyCode : key.keyCode )
{
case 37: break; // Left Arrow
case 39: break; // Right Arrow
default: element = null;
}
}
if ( element )
{
element.scrollIntoView ( );
if ( ( window.innerHeight + window.scrollY ) < document.body.offsetHeight ) // if we are not at the bottom of the page
{
if ( element.offsetHeight < window.innerHeight ) // if the element is shorter than the screen
{ window.scrollBy ( 0, -( ( window.innerHeight - element.offsetHeight ) / 2 ) ) } // position it in the middle of the screen
}
anImageHasBeenCentered = true;
}
};
// The function I would like to add, that is unfortunately triggered by the onkeydown function.
// window.onscroll = function ( ) { anImageHasBeenCentered = false; }
</script>


I found a workaround. I don't know if I can really guarantee it will always work, but it has so far. I just used setTimeout to delay setting my variable to true until after onscroll sets it to false.
window.anImageHasBeenCentered = false;
window.onscroll = function ( ) { anImageHasBeenCentered = false; };
window.onkeydown = function ( key )
{
var element = document.elementFromPoint ( window.innerWidth / 2, window.innerHeight / 2 );
switch ( window.event ? event.keyCode : key.keyCode )
{
case 37: // Left Arrow
if ( anImageHasBeenCentered ) element = element.parentNode.previousSibling.previousSibling.firstChild;
break;
case 39: // Right Arrow
if ( anImageHasBeenCentered ) element = element.parentNode.nextSibling.nextSibling.firstChild;
break;
default: element = null;
}
if ( element )
{
element.scrollIntoView ( );
if ( ( window.innerHeight + window.scrollY ) < document.body.offsetHeight ) // if we are not at the bottom of the page
{
if ( element.offsetHeight < window.innerHeight ) // if the element is shorter than the screen
window.scrollBy ( 0, -( ( window.innerHeight - element.offsetHeight ) / 2 ) ); // position it in the middle of the screen
}
window.setTimeout ( function ( ) { anImageHasBeenCentered = true; }, 1 );
}
};

Related

Horizontal scrolling with mouse wheel in vanilla JS

I'm trying to migrate some jQuery code to vanilla JS that modifies the mouse wheel behavior to scroll a site horizontally instead of vertically:
jQuery:
var wheel = function() {
var width = $( window ).width();
if ( width > 954 ) {
$( 'html' ).on( 'wheel', function( e ) {
e.preventDefault();
if ( Math.abs( e.originalEvent.deltaY ) >= Math.abs( e.originalEvent.deltaX ) ) {
this.scrollLeft += ( e.originalEvent.deltaY * 10 );
} else {
this.scrollLeft -= ( e.originalEvent.deltaX * 10 );
}
} );
} else {
$( 'html' ).off( 'wheel' );
}
}
wheel();
$( window ).on( 'resize', wheel );
As you can see ( if (width > 954) ), the new behavior is just set on desktops, not mobile nor tablet devices.
This is the vanilla JS code I came up with:
Vanilla JS:
var wheel = function() {
var width = window.innerWidth;
var scroll = function( e ) {
e.preventDefault();
if ( Math.abs( e.deltaY ) >= Math.abs( e.deltaX ) ) {
this.scrollLeft += ( e.deltaY * 10 );
} else {
this.scrollLeft -= ( e.deltaX * 10 );
}
}
if ( width > 954 ) {
document.documentElement.addEventListener( 'wheel', scroll );
} else {
document.documentElement.removeEventListener( 'wheel', scroll );
}
}
wheel();
window.addEventListener( 'resize', wheel );
But, when I resize the window to the tablet/mobile width, the horizontal scrolling is not disabled and I cannot scroll the site vertically. It seems as if the removeEventListener() function is not really removing my listener function.
Any ideas about what's going on here?

You are binding wheel handler many times as you resize the window. I would suggest to bind it once and then check the window width in it. Maybe something like this:
var scroll = function( e ) {
var width = window.innerWidth;
if(width <= 954) return;
e.preventDefault();
if ( Math.abs( e.deltaY ) >= Math.abs( e.deltaX ) ) {
this.scrollLeft += ( e.deltaY * 10 );
} else {
this.scrollLeft -= ( e.deltaX * 10 );
}
}
document.documentElement.addEventListener( 'wheel', scroll);

Adding transition animations with Jquery Mobile on <div> tags

may I remind you before answering that I'm a complete imbecile on Javascript.
I was provided a script to enable swipe navigation on my Jquery Mobile Site by Padilicious. It works by placing these functions, as I understand, on a div tag:
<div data-role="page" data-theme="a" id="swipeBox" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);" style="position:relative;width:100%;height:100%;">
Now my problem is that data-transition on Jquery Mobile only works on tags or buttons. How do I add data-transition, or at least entrance and exit transitions, on a tag?
If you guys also need the JS for the swipe navigation script, here it is:
// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger
var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;
// The 4 Touch Event Handlers
// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
event.preventDefault();
// get the total number of fingers touching the screen
fingerCount = event.touches.length;
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
// check that only one finger was used
if ( fingerCount == 1 ) {
// get the coordinates of the touch
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
// store the triggering element ID
triggerElementID = passedName;
} else {
// more than one finger touched so cancel
touchCancel(event);
}
}
function touchMove(event) {
event.preventDefault();
if ( event.touches.length == 1 ) {
curX = event.touches[0].pageX;
curY = event.touches[0].pageY;
} else {
touchCancel(event);
}
}
function touchEnd(event) {
event.preventDefault();
// check to see if more than one finger was used and that there is an ending coordinate
if ( fingerCount == 1 && curX != 0 ) {
// use the Distance Formula to determine the length of the swipe
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
// if the user swiped more than the minimum length, perform the appropriate action
if ( swipeLength >= minLength ) {
caluculateAngle();
determineSwipeDirection();
processingRoutine();
touchCancel(event); // reset the variables
} else {
touchCancel(event);
}
} else {
touchCancel(event);
}
}
function touchCancel(event) {
// reset the variables back to default values
fingerCount = 0;
startX = 0;
startY = 0;
curX = 0;
curY = 0;
deltaX = 0;
deltaY = 0;
horzDiff = 0;
vertDiff = 0;
swipeLength = 0;
swipeAngle = null;
swipeDirection = null;
triggerElementID = null;
}
function caluculateAngle() {
var X = startX-curX;
var Y = curY-startY;
var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); }
}
function determineSwipeDirection() {
if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
swipeDirection = 'left';
} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
swipeDirection = 'left';
} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
swipeDirection = 'right';
} else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
swipeDirection = 'down';
} else {
swipeDirection = 'up';
}
}
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
} else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
}
}
Note that the following are the ones responsible for redirecting to another page:
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
} else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
window.location.href = "gallery.html";
}
My main agenda is only on adding a sliding animations on page transitions. Doesn't matter on how I should do it. Thanks, Love ya!

No need to write that much code.Try following code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageOne">
<div role="main" class="ui-content">
Page One
<br>
Go to page Two
</div>
</div>
<div data-role="page" id="pageTwo">
<div role="main" class="ui-content">
Page Two
<br>
Go to page One
</div>
</div>
</body>
</html>

Three.js OrbitControls Orthographic Panning

In my program, the further out you zoom, the slower you can pan around. So, I want to increase the panning speed based on the zoom level. I've tried .panSpeed, but that doesn't work, and .panSpeed doesn't seem to exist anymore in OrbitControls.js. Is there another function that I can use?
Here is the documentation I looked at for Three.js OrbitControls:
https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

If you look in the documentation you just linked youll'find
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
Maybe .keyPanSpeed is what you're looking for.
UPDATE 1:
In the OrbitControls.js you have the following function to handle pan:
function pan( deltaX, deltaY ) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
constraint.pan( deltaX, deltaY, element.clientWidth, element.clientHeight );
}
So if for example you multiply deltaX and deltaY by 10 you'll see the pan going 10 times faster:
constraint.pan( deltaX * 10, deltaY * 10, element.clientWidth, element.clientHeight );
Try to insert your calculations based on zoom right there, it should work.
UPDATE 2:
Actually I'm using an older version of OrbitControls, which is slightly different from the current one. Here it is:
/**
* #author qiao / https://github.com/qiao
* #author mrdoob / http://mrdoob.com
* #author alteredq / http://alteredqualia.com/
* #author WestLangley / http://github.com/WestLangley
* #author erich666 / http://erichaines.com
*/
/*global THREE, console */
( function () {
function OrbitConstraint ( object ) {
this.object = object;
// "target" sets the location of focus, where the object orbits around
// and where it pans with respect to.
this.target = new THREE.Vector3();
// Limits to how far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// Limits to how far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;
this.dampingFactor = 0.25;
////////////
// internals
var scope = this;
var EPS = 0.000001;
// Current position in spherical coordinate system.
var theta;
var phi;
// Pending changes
var phiDelta = 0;
var thetaDelta = 0;
var scale = 1;
var panOffset = new THREE.Vector3();
var zoomChanged = false;
// API
this.getPolarAngle = function () {
return phi;
};
this.getAzimuthalAngle = function () {
return theta;
};
this.rotateLeft = function ( angle ) {
thetaDelta -= angle;
};
this.rotateUp = function ( angle ) {
phiDelta -= angle;
};
// pass in distance in world space to move left
this.panLeft = function() {
var v = new THREE.Vector3();
return function panLeft ( distance ) {
var te = this.object.matrix.elements;
// get X column of matrix
v.set( te[ 0 ], te[ 1 ], te[ 2 ] );
v.multiplyScalar( - distance );
panOffset.add( v );
};
}();
// pass in distance in world space to move up
this.panUp = function() {
var v = new THREE.Vector3();
return function panUp ( distance ) {
var te = this.object.matrix.elements;
// get Y column of matrix
v.set( te[ 4 ], te[ 5 ], te[ 6 ] );
v.multiplyScalar( distance );
panOffset.add( v );
};
}();
// pass in x,y of change desired in pixel space,
// right and down are positive
this.pan = function ( deltaX, deltaY, screenWidth, screenHeight ) {
if ( scope.object instanceof THREE.PerspectiveCamera ) {
// perspective
var position = scope.object.position;
var offset = position.clone().sub( scope.target );
var targetDistance = offset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
// we actually don't use screenWidth, since perspective camera is fixed to screen height
scope.panLeft( 2 * deltaX * targetDistance / screenHeight );
scope.panUp( 2 * deltaY * targetDistance / screenHeight );
} else if ( scope.object instanceof THREE.OrthographicCamera ) {
// orthographic
scope.panLeft( deltaX * ( scope.object.right - scope.object.left ) / screenWidth );
scope.panUp( deltaY * ( scope.object.top - scope.object.bottom ) / screenHeight );
} else {
// camera neither orthographic or perspective
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
}
};
this.dollyIn = function ( dollyScale ) {
if ( scope.object instanceof THREE.PerspectiveCamera ) {
scale /= dollyScale;
} else if ( scope.object instanceof THREE.OrthographicCamera ) {
scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom * dollyScale ) );
scope.object.updateProjectionMatrix();
zoomChanged = true;
} else {
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
}
};
this.dollyOut = function ( dollyScale ) {
if ( scope.object instanceof THREE.PerspectiveCamera ) {
scale *= dollyScale;
} else if ( scope.object instanceof THREE.OrthographicCamera ) {
scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom / dollyScale ) );
scope.object.updateProjectionMatrix();
zoomChanged = true;
} else {
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
}
};
this.update = function() {
var offset = new THREE.Vector3();
// so camera.up is the orbit axis
var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
var quatInverse = quat.clone().inverse();
var lastPosition = new THREE.Vector3();
var lastQuaternion = new THREE.Quaternion();
return function () {
var position = this.object.position;
offset.copy( position ).sub( this.target );
// rotate offset to "y-axis-is-up" space
offset.applyQuaternion( quat );
// angle from z-axis around y-axis
theta = Math.atan2( offset.x, offset.z );
// angle from y-axis
phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y );
theta += thetaDelta;
phi += phiDelta;
// restrict theta to be between desired limits
theta = Math.max( this.minAzimuthAngle, Math.min( this.maxAzimuthAngle, theta ) );
// restrict phi to be between desired limits
phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) );
// restrict phi to be betwee EPS and PI-EPS
phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );
var radius = offset.length() * scale;
// restrict radius to be between desired limits
radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) );
// move target to panned location
this.target.add( panOffset );
offset.x = radius * Math.sin( phi ) * Math.sin( theta );
offset.y = radius * Math.cos( phi );
offset.z = radius * Math.sin( phi ) * Math.cos( theta );
// rotate offset back to "camera-up-vector-is-up" space
offset.applyQuaternion( quatInverse );
position.copy( this.target ).add( offset );
this.object.lookAt( this.target );
if ( this.enableDamping === true ) {
thetaDelta *= ( 1 - this.dampingFactor );
phiDelta *= ( 1 - this.dampingFactor );
} else {
thetaDelta = 0;
phiDelta = 0;
}
scale = 1;
panOffset.set( 0, 0, 0 );
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
if ( zoomChanged ||
lastPosition.distanceToSquared( this.object.position ) > EPS ||
8 * ( 1 - lastQuaternion.dot( this.object.quaternion ) ) > EPS ) {
lastPosition.copy( this.object.position );
lastQuaternion.copy( this.object.quaternion );
zoomChanged = false;
return true;
}
return false;
};
}();
};
// This set of controls performs orbiting, dollying (zooming), and panning. It maintains
// the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is
// supported.
//
// Orbit - left mouse / touch: one finger move
// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
// Pan - right mouse, or arrow keys / touch: three finter swipe
THREE.OrbitControls = function ( object, domElement ) {
var constraint = new OrbitConstraint( object );
this.domElement = ( domElement !== undefined ) ? domElement : document;
// API
Object.defineProperty( this, 'constraint', {
get: function() {
return constraint;
}
} );
this.getPolarAngle = function () {
return constraint.getPolarAngle();
};
this.getAzimuthalAngle = function () {
return constraint.getAzimuthalAngle();
};
// Set to false to disable this control
this.enabled = true;
// center is old, deprecated; use "target" instead
this.center = this.target;
// This option actually enables dollying in and out; left as "zoom" for
// backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
////////////
// internals
var scope = this;
var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();
var panStart = new THREE.Vector2();
var panEnd = new THREE.Vector2();
var panDelta = new THREE.Vector2();
var dollyStart = new THREE.Vector2();
var dollyEnd = new THREE.Vector2();
var dollyDelta = new THREE.Vector2();
var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 };
var state = STATE.NONE;
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = this.object.zoom;
// events
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
// pass in x,y of change desired in pixel space,
// right and down are positive
function pan( deltaX, deltaY ) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
constraint.pan( deltaX, deltaY, element.clientWidth, element.clientHeight );
}
this.update = function () {
if ( this.autoRotate && state === STATE.NONE ) {
constraint.rotateLeft( getAutoRotationAngle() );
}
if ( constraint.update() === true ) {
this.dispatchEvent( changeEvent );
}
};
this.reset = function () {
state = STATE.NONE;
this.target.copy( this.target0 );
this.object.position.copy( this.position0 );
this.object.zoom = this.zoom0;
this.object.updateProjectionMatrix();
this.dispatchEvent( changeEvent );
this.update();
};
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {
return Math.pow( 0.95, scope.zoomSpeed );
}
function onMouseDown( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
if ( event.button === scope.mouseButtons.ORBIT ) {
if ( scope.enableRotate === false ) return;
state = STATE.ROTATE;
rotateStart.set( event.clientX, event.clientY );
} else if ( event.button === scope.mouseButtons.ZOOM ) {
if ( scope.enableZoom === false ) return;
state = STATE.DOLLY;
dollyStart.set( event.clientX, event.clientY );
} else if ( event.button === scope.mouseButtons.PAN ) {
if ( scope.enablePan === false ) return;
state = STATE.PAN;
panStart.set( event.clientX, event.clientY );
}
if ( state !== STATE.NONE ) {
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( startEvent );
}
}
function onMouseMove( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if ( state === STATE.ROTATE ) {
if ( scope.enableRotate === false ) return;
rotateEnd.set( event.clientX, event.clientY );
rotateDelta.subVectors( rotateEnd, rotateStart );
// rotating across whole screen goes 360 degrees around
constraint.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
// rotating up and down along whole screen attempts to go 360, but limited to 180
constraint.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
rotateStart.copy( rotateEnd );
} else if ( state === STATE.DOLLY ) {
if ( scope.enableZoom === false ) return;
dollyEnd.set( event.clientX, event.clientY );
dollyDelta.subVectors( dollyEnd, dollyStart );
if ( dollyDelta.y > 0 ) {
constraint.dollyIn( getZoomScale() );
} else if ( dollyDelta.y < 0 ) {
constraint.dollyOut( getZoomScale() );
}
dollyStart.copy( dollyEnd );
} else if ( state === STATE.PAN ) {
if ( scope.enablePan === false ) return;
panEnd.set( event.clientX, event.clientY );
panDelta.subVectors( panEnd, panStart );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
}
if ( state !== STATE.NONE ) scope.update();
}
function onMouseUp( /* event */ ) {
if ( scope.enabled === false ) return;
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onMouseWheel( event ) {
if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
event.preventDefault();
event.stopPropagation();
var delta = 0;
if ( event.wheelDelta !== undefined ) {
// WebKit / Opera / Explorer 9
delta = event.wheelDelta;
} else if ( event.detail !== undefined ) {
// Firefox
delta = - event.detail;
}
if ( delta > 0 ) {
constraint.dollyOut( getZoomScale() );
} else if ( delta < 0 ) {
constraint.dollyIn( getZoomScale() );
}
scope.update();
scope.dispatchEvent( startEvent );
scope.dispatchEvent( endEvent );
}
function onKeyDown( event ) {
if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
switch ( event.keyCode ) {
case scope.keys.UP:
pan( 0, scope.keyPanSpeed );
scope.update();
break;
case scope.keys.BOTTOM:
pan( 0, - scope.keyPanSpeed );
scope.update();
break;
case scope.keys.LEFT:
pan( scope.keyPanSpeed, 0 );
scope.update();
break;
case scope.keys.RIGHT:
pan( - scope.keyPanSpeed, 0 );
scope.update();
break;
}
}
function touchstart( event ) {
if ( scope.enabled === false ) return;
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
if ( scope.enableRotate === false ) return;
state = STATE.TOUCH_ROTATE;
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
break;
case 2: // two-fingered touch: dolly
if ( scope.enableZoom === false ) return;
state = STATE.TOUCH_DOLLY;
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyStart.set( 0, distance );
break;
case 3: // three-fingered touch: pan
if ( scope.enablePan === false ) return;
state = STATE.TOUCH_PAN;
panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
break;
default:
state = STATE.NONE;
}
if ( state !== STATE.NONE ) scope.dispatchEvent( startEvent );
}
function touchmove( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
if ( scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_ROTATE ) return;
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
rotateDelta.subVectors( rotateEnd, rotateStart );
// rotating across whole screen goes 360 degrees around
constraint.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
// rotating up and down along whole screen attempts to go 360, but limited to 180
constraint.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
rotateStart.copy( rotateEnd );
scope.update();
break;
case 2: // two-fingered touch: dolly
if ( scope.enableZoom === false ) return;
if ( state !== STATE.TOUCH_DOLLY ) return;
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyEnd.set( 0, distance );
dollyDelta.subVectors( dollyEnd, dollyStart );
if ( dollyDelta.y > 0 ) {
constraint.dollyOut( getZoomScale() );
} else if ( dollyDelta.y < 0 ) {
constraint.dollyIn( getZoomScale() );
}
dollyStart.copy( dollyEnd );
scope.update();
break;
case 3: // three-fingered touch: pan
if ( scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_PAN ) return;
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
panDelta.subVectors( panEnd, panStart );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
scope.update();
break;
default:
state = STATE.NONE;
}
}
function touchend( /* event */ ) {
if ( scope.enabled === false ) return;
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function contextmenu( event ) {
event.preventDefault();
}
this.dispose = function() {
this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
this.domElement.removeEventListener( 'mousedown', onMouseDown, false );
this.domElement.removeEventListener( 'mousewheel', onMouseWheel, false );
this.domElement.removeEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox
this.domElement.removeEventListener( 'touchstart', touchstart, false );
this.domElement.removeEventListener( 'touchend', touchend, false );
this.domElement.removeEventListener( 'touchmove', touchmove, false );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
window.removeEventListener( 'keydown', onKeyDown, false );
}
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
this.domElement.addEventListener( 'mousedown', onMouseDown, false );
this.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
this.domElement.addEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox
this.domElement.addEventListener( 'touchstart', touchstart, false );
this.domElement.addEventListener( 'touchend', touchend, false );
this.domElement.addEventListener( 'touchmove', touchmove, false );
window.addEventListener( 'keydown', onKeyDown, false );
// force an update at start
this.update();
};
THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
Object.defineProperties( THREE.OrbitControls.prototype, {
object: {
get: function () {
return this.constraint.object;
}
},
target: {
get: function () {
return this.constraint.target;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: target is now immutable. Use target.set() instead.' );
this.constraint.target.copy( value );
}
},
minDistance : {
get: function () {
return this.constraint.minDistance;
},
set: function ( value ) {
this.constraint.minDistance = value;
}
},
maxDistance : {
get: function () {
return this.constraint.maxDistance;
},
set: function ( value ) {
this.constraint.maxDistance = value;
}
},
minZoom : {
get: function () {
return this.constraint.minZoom;
},
set: function ( value ) {
this.constraint.minZoom = value;
}
},
maxZoom : {
get: function () {
return this.constraint.maxZoom;
},
set: function ( value ) {
this.constraint.maxZoom = value;
}
},
minPolarAngle : {
get: function () {
return this.constraint.minPolarAngle;
},
set: function ( value ) {
this.constraint.minPolarAngle = value;
}
},
maxPolarAngle : {
get: function () {
return this.constraint.maxPolarAngle;
},
set: function ( value ) {
this.constraint.maxPolarAngle = value;
}
},
minAzimuthAngle : {
get: function () {
return this.constraint.minAzimuthAngle;
},
set: function ( value ) {
this.constraint.minAzimuthAngle = value;
}
},
maxAzimuthAngle : {
get: function () {
return this.constraint.maxAzimuthAngle;
},
set: function ( value ) {
this.constraint.maxAzimuthAngle = value;
}
},
enableDamping : {
get: function () {
return this.constraint.enableDamping;
},
set: function ( value ) {
this.constraint.enableDamping = value;
}
},
dampingFactor : {
get: function () {
return this.constraint.dampingFactor;
},
set: function ( value ) {
this.constraint.dampingFactor = value;
}
},
// backward compatibility
noZoom: {
get: function () {
console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
return ! this.enableZoom;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
this.enableZoom = ! value;
}
},
noRotate: {
get: function () {
console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
return ! this.enableRotate;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
this.enableRotate = ! value;
}
},
noPan: {
get: function () {
console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
return ! this.enablePan;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
this.enablePan = ! value;
}
},
noKeys: {
get: function () {
console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
return ! this.enableKeys;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
this.enableKeys = ! value;
}
},
staticMoving : {
get: function () {
console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
return ! this.constraint.enableDamping;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
this.constraint.enableDamping = ! value;
}
},
dynamicDampingFactor : {
get: function () {
console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
return this.constraint.dampingFactor;
},
set: function ( value ) {
console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
this.constraint.dampingFactor = value;
}
}
} );
}() );

Calling functions when the mouse wheel moves

I am a beginner at using javascript and jquery and I don't know a whole lot yet. I am trying to make some code that would call different functions if the mouse wheel moves in certain directions that is compatible with most or all programs. Could some one show me using an example piece of code how to implement this?
This is how I would need it to be set up
// JavaScript Document
...
...
...
...
function wheelMove(){
// NOTE: I'd like the event of scrolling not to fire
// (i.e return false; or something like it)
// if variables need to be set, they can go here
//...
//...
//...
if (// some code to detect if the wheel is moving towards the right){
var sRight = // some code to detect the speed in this direction;
moveRight(sRight); // calls a function when it moves right;
}
if (// some code to detect if the wheel is moving towards the left){
var sLeft = // some code to detect the speed in this direction;
moveLeft(sLeft); // calls a function when it moves left;
}
if (// some code to detect if the wheel is moving towards the up){
var sUp = // some code to detect the speed in this direction;
moveUp(sUp); // calls a function when it moves up;
}
if (// some code to detect if the wheel is moving towards the down){
var sDown = // some code to detect the speed in this direction;
moveDown(sDown); // calls a function when it moves down;
}
}

Here is an example (and here it is on jsfiddle.com):
$( '#scrollCatcher' ).on( 'mousewheel', function ( event ) {
// crude check to see events are supported
if ( typeof event.originalEvent.wheelDeltaX === 'undefined'
|| typeof event.originalEvent.wheelDeltaY === 'undefined' ) {
console.log( "could not find mouse deltas" );
return;
}
var deltaX = event.originalEvent.wheelDeltaX;
var deltaY = event.originalEvent.wheelDeltaY;
var scrolledLeft = deltaX < 0;
var scrolledRight = deltaX > 0;
var scrolledUp = deltaY < 0;
var scrolledDown = deltaY > 0;
clearDisplay();
if ( scrolledLeft ) { display( 'scrolled left' ); }
if ( scrolledRight ) { display( 'scrolled right' ); }
if ( scrolledUp ) { display( 'scrolled up' ); }
if ( scrolledDown ) { display( 'scrolled down' ); }
});
function clearDisplay () {
$( '#scrollCatcher' ).text( '' );
}
function display( message ) {
$( '#scrollCatcher' ).text( $( '#scrollCatcher' ).text() + message + ' ' );
}
To explain deltaX and deltaY are the distance travelled by the scroll wheel since the last event. Where there is display you could replace it with you own code. For example:
if ( scrolledLeft ) { moveLeft( deltaX ) }

Add swipe left/right to web page, but use default swipe up/down

I'm using padilicious to detect swiping gestures for web pages that will be viewed on iOS and desktops. It works great to swipe left/right for previous and next pages of my site. However, it seems to override the default behavior in iPhone/iPad when swiping up/down. I'd like an up/down swipe to scroll the page, which it does when I don't have padilicious running. Just having the code ignore up/down swipes doesn't seem to work.
The section of padilicious code that I've been
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
document.location = document.getElementById('nextPage').href;
} else if ( swipeDirection == 'right' ) {
document.location = document.getElementById('prevPage').href;
} else if ( swipeDirection == 'up' ) {
return;
} else if ( swipeDirection == 'down' ) {
return;
}
}

Remove event.preventDefault(); from all functions. In the function processingRoutine() {} add event.preventDefault(); for what you want.
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'orange';
event.preventDefault();
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'green';
event.preventDefault();
} else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'maroon';
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'purple';
}
}

there's a jquery library, which does the job (by not providing up/down methods): http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

I'm not familiar with padilicious, but check and see if the ontouchmove="BlockMove(event);" is set anywhere, that prevents the page from scrolling like you describe, I'm not sure how you would get it to keep the vertical scrolling but swipe horizontally.
Edit: I've since found a really helpful overview for doing "native" feel iOS web apps, it might not be exactly what you're looking for, but could provide you with another avenue of approach to your problem. Check it out: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Padilicious seems to be preventing default in all cases. See the call to event.preventDefault() in all cases.
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
event.preventDefault();
You will have to change start, stop, ... handlers to not call preventDefault() in up and down cases.

I changed the script, this work:
// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger
var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;
// The 4 Touch Event Handlers
// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
//event.preventDefault();
// get the total number of fingers touching the screen
fingerCount = event.touches.length;
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
// check that only one finger was used
if ( fingerCount == 1 ) {
// get the coordinates of the touch
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
// store the triggering element ID
triggerElementID = passedName;
} else {
// more than one finger touched so cancel
touchCancel(event);
}
}
function touchMove(event) {
//event.preventDefault();
if ( event.touches.length == 1 ) {
curX = event.touches[0].pageX;
curY = event.touches[0].pageY;
} else {
touchCancel(event);
}
}
function touchEnd(event) {
//event.preventDefault();
// check to see if more than one finger was used and that there is an ending coordinate
if ( fingerCount == 1 && curX != 0 ) {
// use the Distance Formula to determine the length of the swipe
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
// if the user swiped more than the minimum length, perform the appropriate action
if ( swipeLength >= minLength ) {
caluculateAngle();
determineSwipeDirection();
processingRoutine();
touchCancel(event); // reset the variables
} else {
touchCancel(event);
}
} else {
touchCancel(event);
}
}
function touchCancel(event) {
// reset the variables back to default values
fingerCount = 0;
startX = 0;
startY = 0;
curX = 0;
curY = 0;
deltaX = 0;
deltaY = 0;
horzDiff = 0;
vertDiff = 0;
swipeLength = 0;
swipeAngle = null;
swipeDirection = null;
triggerElementID = null;
}
function caluculateAngle() {
var X = startX-curX;
var Y = curY-startY;
var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); }
}
function determineSwipeDirection() {
if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
swipeDirection = 'left';
} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
swipeDirection = 'left';
} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
swipeDirection = 'right';
}
/* else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
swipeDirection = 'down';
} else {
swipeDirection = 'up';
}*/
}
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
event.preventDefault();
swipedElement.style.backgroundColor = 'orange';
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
event.preventDefault();
swipedElement.style.backgroundColor = 'green';
}
/*else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'maroon';
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'purple';
}*/
}

Categories