I'm trying to develop an interaction I designed where an html element is y-scaled ( scaled in height ) during a pinch so that the height of the element becomes the distance between the two fingers involved in the gesture.
For now, I'm trying to listen for a pinch in and fire an alert and then listen for a pinch out and fire a separate alert with jQuery. Do you know how to do this? Perhaps without a plugin?
I've attempted to do this with two plugins. More on the first attempt, later.
What's wrong with the second attempt is that it says a pinch in is a pinch out and even a tap or click is a pinch out.
My second attempt is in this JS Fiddle: http://jsfiddle.net/hnabM/1/
Here is code used in the second attempt:
//pinchZoom is the distance between the two fingers involved in the pinch
var pinchIn = null;
var dist = null;
$('.pinch').swipe({
pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom){
dist = null;
},
pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom){
dist = null;
},
pinchStatus:function(event, phase, direction, distance, duration, fingerCount, pinchZoom){
if(dist != null){
if(dist > pinchZoom){
pinchIn = true;
}
else{
pinchIn = false;
}
dist = pinchZoom;
if(pinchIn === true){
console.log("pinching in");
}
else{
console.log("pinching out");
}
}
else{
dist = pinchZoom;
}
},
fingers:2,
pinchThreshold:0
});
Here is what I did the first attempt. I got it working, but when I combined it with my site, it suddenly didn't work.
The first time I attempted this, I did it with the jQuery version of hammer.js ( http://eightmedia.github.io/hammer.js/ )-- a somewhat famous library for listening for multi-touch gestures. I successfully accomplished it separately apart from the site that I need it to work in. Here it is working on the class .polaroid ( the images ), try pinching in on them and they y-scale down and pinching out on them fires an alert: http://goo.gl/oOQDH0. However, when I apply the same exact js in the site, the site I need it to work in, it suddenly doesn't work. All the dependencies are there. No errors. Also scrolling is somewhat inhibited ( tough to do on touch devices ) for some-reason. It is same exact code applied to the .dataCard class ( the white rectangles under the header ), but failing to work: http://goo.gl/dagKxT
I would greatly, greatly appreciate any and all help in getting this interaction developed and working.
Thanks in Advance!
Not to dismiss or discourage you from doing so but is there any particular reason why you are writing this yourself?
In any case take a look at hammer.js
https://github.com/EightMedia/hammer.js
Which supports/emulates a lot of the common touch gestures out there. Including pinch to zoom. It's there on their example pages:
https://github.com/EightMedia/hammer.js/blob/master/examples/pinchzoom.html
You've probably done your research and seen lots of libraries like this but Hammer's code base is really well laid out and easy to figure out.
If you're going to give this a go from scratch you will probably end up detecting a gesture at the start and locking it down with a common flag (so other gestures don't kick in) then resetting the flag when the gesture completes.
Related
I am using Greensock Draggable, to build a draggable slider control. for example, let's say I have a 3 pages slider, when the position is scrolled to 1/3, turns to the second page.
let myDraggable = new Draggable(dragger, {
//trigger:ufo,
type:'x',
bounds:{minX:0, maxX:maxDrag},
throwProps:true,
//cursor:'auto',
/* liveSnap:function(value){
return Math.round(value / step) * step;
}, */
onPress:onPress,
onRelease:onRelease,
onThrowComplete:function(){isDragging = false},
overshootTolerance:0
})
everything works fine so far, by defining onRelease function, I built the functionality completely.
but then I want to build auto-scrolling, not the one mentioned in documentation, but, use setInterval to gradually scroll to 1/3, 2/3... but draggable does not seem to support customise x position dragging, which I failed to look up for a function that takes x position and drag the element there.
is there a draggable api that takes one position and drags the element there? if it doesn't, do I have to build a untrusted drag event? if so how can I do that?
sorry that I did a lot relative research but failed to work out solution. I will be more than glad if you can give me a hand, or just something to read for another direction.
Posting this to share how I tackled this problem. I had searched everywhere and couldn't seem to find a working solution.
The problem (my version) - I had a sprite that was going to be my player in my game. I had both a running left and a running right animation. These animations are set to loop, so the player will appear as if they are running when their velocity is increased. I wanted the player's animation to stop once they had stopped moving
My implementation
update() {
//If right arrowkey is pressed
if (this.arrowKeys.right._justDown) {
//Move player
this.hero.setVelocityX(5);
//Play your animation animation
this.hero.anims.play('yourAnim', true);
};
//This will run every time the animation "repeats", meaning it has gone through all of its frames. Make sure your animation is set to loop!
this.hero.on("animationupdate", () => {
//If the player has stopped moving
if (this.hero.body.velocity.x < 0.5 && this.hero.body.velocity.x > -0.5) {
//Stop the animation
this.hero.anims.stop();
}
});
}
Formatting is a little bad. And there's almost surely a slightly quicker way to do this. But this is my implementation for now, and I just wanted to share in case someone else was having the same issue! Feel free to comment with a better solution, or any questions
I had a problem like this, you might not need a solution anymore, but others might. I used JustDown to start the animation and JustUp to go to my idle state. Code in update:
if(Phaser.Input.Keyboard.JustDown(downKey)){
gamePiece.anims.play("down");
}
if(Phaser.Input.Keyboard.JustUp(downKey)){
gamePiece.anims.play("spin");
}
In your case, it would stop the animation instead of an idle animation.
I think you're looking for the .pause() method.
I have a site here:
www.completefaq.com
The main page contains a slider, which I built on my own. It changes the slides automatically after 8 secs. and on a click on forward or backward button. But, the problem is that I want it to scroll even when one tries to just slide it on a touchscreen.
Any help is appreciated. I can only use CSS, JavaScript, HTML and PHP, because other APIs such as JQuery, tend to slowdown the website.
Since you don't want a jQuery plugin, it's going to be non trivial due to the differences between the various touch platforms, and in the end you would probably end up in reinventing the wheel trying to get the abstraction you need. Above all, your effort will clearly depend on the level of accuracy you want to achieve, so it's advisable that you don't try to make the images respond to every minimal touch event.
I believe your best bet is to use Tocca.js, a very promising, standalone script which is "super lightweight" (only 1kB) and aims to normalize touch events among existing devices.
Hammer.js is more accurate, but could be a bit heavier in your case.
QuoJS is also good but it's not focused only on touch events.
You may find this and this SO question interesting. Finally, you can always take inspiration from the several existing touch-enabled javascript image sliders.
Here is a very lightweight script to start with.
Put this script somewhere below your div#featured, or execute it on dom ready.
You may want ajust the minimum swipe time (200ms) and minimum swipe distance (50px):
var featured = document.getElementById("featured");
if( "ontouchstart" in window ) {
var touchStart = function(evt) {
var startTime = (new Date()).getTime();
var startX = evt.changedTouches[0].pageX;
var touchEnd = function(evt) {
document.removeEventListener("touchend", touchEnd);
var diffX = evt.changedTouches[0].pageX - startX;
var elapsed = (new Date()).getTime() - startTime;
console.log( "Swiped " + diffX + " pixels in " + elapsed + " milliseconds" );
if( elapsed < 200 && Math.abs(diffX) > 50 ) {
( diffX < 0 ) ? slideright() : slideleft();
}
}
document.addEventListener("touchend", touchEnd);
};
featured.addEventListener("touchstart", touchStart);
}
I understand that you want to keep your website light, but if you wan't more advanced gesture recognition that this simple swipe, you will have to go with some kind of framework.
In my web app, I have some thumbnails that open a lightbox when clicked. On mobile, the thumbnails are small and the user typically zooms in. The problem is that when they click to play it, the lightbox is outside of the viewable area (they have to scroll to the lightbox to see the video). Is it possible to force a mobile browser to zoom out so they can see the whole page?
Making the page more responsive is not an option right now; it is a fairly large web application and it would take a huge amount of time to refactor.
Dug through a lot of other questions trying to get something to zoom out to fit the entire page. This question was the most relevant to my needs, but had no answers. I found this similar question which had a solution, although implemented differently, and not what I needed.
I came up with this, which seems to work in Android at least.
initial-scale=0.1: Zooms out really far. Should reveal your whole website (and then some)
width=1200: Overwrites initial-scale, sets the device width to 1200.
You'll want to change 1200 to be the width of your site. If your site is responsive then you can probably just use initial-scale=1. But if your site is responsive, you probably don't need this in the first place.
function zoomOutMobile() {
var viewport = document.querySelector('meta[name="viewport"]');
if ( viewport ) {
viewport.content = "initial-scale=0.1";
viewport.content = "width=1200";
}
}
zoomOutMobile();
Similar to Radley Sustaire's solution I managed to force unzoom whenever the device is turned in React with
zoomOutMobile = () => {
const viewport = document.querySelector('meta[name="viewport"]');
if ( viewport ) {
viewport.content = 'initial-scale=1';
viewport.content = 'width=device-width';
}
}
and inside my render
this.zoomOutMobile();
1 edge case I found was this did not work on the Firefox mobile browser
I ran in a similar problem, rather the opposite, I guess, but the solution is most certainly the same. In my case, I have a thumbnail that people click, that opens a "popup" where users are likely to zoom in to see better and once done I want to return to the normal page with a scale of 1.0.
To do that I looked around quite a bit until I understood what happens and could then write the correct code.
The viewport definition in the meta data is a live value. When changed, the system takes the new value in consideration and fixes the rendering accordingly. However, the "when changed" is detected by the GUI and while the JavaScript code is running, the GUI thread is mostly blocked...
With that in mind, it meant that doing something like this would fail:
viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale); // IGNORED!
viewport.attr("content", original);
So, since the only way I found to fix the scale is to force it by making a change that I do not want to keep, I have to reset back to the original. But the intermediary changes are not viewed and act upon (great optimization!) so how do we resolve that issue? I used the setTimeout() function:
viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale);
setTimeout(function()
{
viewport.attr("content", original);
}, 100);
Here I sleep 100ms before resetting the viewport back to what I consider normal. That way the viewport takes the maximum-scale=1 parameter in account, then it times out and removes that parameter. The scale was changed back to 1 in the process and restoring my original (which does not have a maximum-scale parameter) works as expected (i.e. I can scale the interface again.)
WARNING 1: If you have a maximum-scale parameter in your original, you probably want to replace it instead of just appending another value at the end like in my sample code. (i.e. force_scale = original.replace(/maximum-scale=[^,]+/, "maximum-scale=1") would do the replace--but that works only if there is already a maximum-scale, so you may first need to check to allow for either case.)
WARNING 2: I tried with 0ms instead of 100ms and it fails. This may differ from browser to browser, but the Mozilla family runs the immediately timed out timer code back to back, meaning that the GUI process would never get a chance to reset the scale back to 1 before executing the function to reset the viewport. Also I do know of a way to know that the current viewport values were worked on by the GUI... (i.e. this is a hack, unfortunately.)
This one works for me
let sw = window.innerWidth;
let bw = $('body').width();
let ratio = sw / bw - 0.01;
$('html').css('zoom', ratio);
$('html').css('overflow-x', 'hidden');
Its fits html to screen and prevents from scrolling. But this is not a good idea and work not everywhere.
var zoomreset = function() {
var viewport = document.querySelector("meta[name='viewport']");
viewport.content = "width=650, maximum-scale=0.635";
setTimeout(function() {
viewport.content = "width=650, maximum-scale=1";
}, 350);
}
setTimeout(zoomreset, 150);
replace 650 with the width of your page
This question is more of an advice research, I do hope that it will be helpful for others and it won't closed, as I'm not quite sure where to ask for advice on this matter.
I've been developing for mobile for the past 6 months and I had the occasion to deal with all kinds of situations and bugs on various devices.
The most troubling was the scrolling issue, when it comes to scrolling in multiple areas of the website. On three projects that I have been working on I've been building a navigation that behaves the same way that the native iOS Facebook app has, or the Google website on mobile, etc. And for each one I came up with different solutions.
But a few days ago I have just released a new JavaScript library, drawerjs, that can be used to generate such navigation (so called off canvas concept). The difference between the other libs and this one is that is library agnostic, and it acts on touch behavior (the same way that the Facebook app behaves) not just open / close on click.
One of the things that I have left to implement is a solution for scrolling inside the menu and the navigation without affecting one another (most of the time when you scroll in such way, the content tends to scroll together with you menu or after you have reached the end of the menu scrolling).
I have two solutions in mind:
One approach would be to use the same principle I'm using for dragging the content and showing the navigation, on touchmove I prevent the default scrolling on document / content and I start translating the contents with the same amount you scroll. And with the same resistant behavior as a touch slider would have (when you exceed the boundaries and let go, the contents would translate back so it doesn't exceed the boundary anymore, or on swipe with the same behavior).
A second approach would be using the native overflow-scrolling that iOS has and would offer the same feel as described in the first approach. The downside of this would be that only iOS devices would have the nice resistant feature, but it would be, supposedly, less of a hassle the the first approach.
So I'm not quite sure which approach I should take, or if there any better solutions for that. I'm also trying to keep in mind that some users would like to hide the url bar, so scrolling on the body / html would have to be kept (on the y axis).
You could do touchmove . But as far as I understand, you want something like this?
http://jsfiddle.net/2DwyH/
using
var menu = $('#menu')
menu.on('mousewheel', function(e, d) {
if((this.scrollTop === (menu[0].scrollHeight - menu.height()) && d < 0) || (this.scrollTop === 0 && d > 0)) {
e.preventDefault();
}
});
Using this plugin from Brandon Aaron - github : https://github.com/brandonaaron/jquery-mousewheel
And it should work with Android: What DOM events are available to WebKit on Android?
Some more info here: Prevent scrolling of parent element?
Also without using the plugin above , using only jQuery you could do this like it says on the link above - answer from Troy Alford
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});
The JS Fiddle he mentions: http://jsfiddle.net/TroyAlford/4wrxq/1/
Why not just provide a fixed height to your widget (min and max will also do). Then define like these -
height: x px;
overflow-y: auto;
This way till the focus is inside the widget, it'll only overflow the widget, once outside the page will scroll without affecting widget content at all.