I want to make an image gallery for mobile with similar functionality to Flickr.
I'd like for it to move an image on touchmove depending on the direction your finger moves, and if you make a small swipe gesture, I'd like it to move the image all the way over, or if the swipe wasn't big enough, move the div back to its starting position on the x axis.
I know what the logic would look like, I'm just unsure of the syntax to use.
I think it'd be something like this:
On touchstart
-Assign variable for x position of touchstart
On touchmove
-Assign variable for x position of touchmove
-assign a variable for touchmove minus touchstart
- add (touchmove minus touchstart) to the current x position of a div
On touchend
- if touchmove => touchstart + 50px
then add 1000px - (touchmove-touchstart) to the divs x position
-else if touchmove =< touchstart - 50px
then minus 1000px + (touchmove - touchstart) from the divs x position
Else
Minus (touchmove - touchstart) from the x position of the div
Can anyone translate this^^^ to javascript?
If you are really up to the challenge, there is a lot of things to consider. You will need to make it platform independent, decide whether to animate with JavaScript, CSS3 animations or a bit of both. It will need to be responsive and allow the images to be loaded on demand etc. What about backwards compatibility?
You will also need to work in some clever logic that doesn't just detect the distance between the touchstart and touchmove but also the speed this was done. For example the user could flick their finger a short distance very fast causing a transition to occur or could move their finger a long distance very slowly causing a transition to not occur (within limits).
So to answer your question, no this will not just animate by itself. It will not move smoothly without some clever and efficient JavaScript or CSS3 animations.
I would recommend using one of the MANY JQuery libraries that already exist to do this for you. There are a number of free libraries out there that work great. After a quick search I found this one:
http://www.photoswipe.com/, which seems to do exactly what you are trying to achieve.
Related
There's quite a few questions about this where the solution provided is to just set the top left and top down values of the image to the position of the mouse/touch, however what I want to do is to have an actual dragging movement. Regardless as to where on the canvas I press, if I drag my finger to the right x pixels, I want the image to move to the right x pixels. Same goes with left, up, and down.
I'm at a complete loss as to where to even start with this. I will be handling mobile touch events, so I feel like using canvas.addEventListener('touchmove') would be the best option, but I'm not sure.
I already have the canvas repainting and everything handled, just really need help with the logic for dragging the image in real time, instead of just snapping it into position.
Get the point where the interaction starts (touchstart) and use it to calculate how much the finger moved on the screen (in the touchmove callback) and add it to the image position (also in touchmove).
PS: Also I recommend using something like PIXI JS for canvas/WebGL stuff ... unless you need a custom solution.
I need some help computing and calculating mouse wheel scrolling speed.
I want to determine when the user is scrolling using their mousewheel and how fast or slow they scrolling.
Based on speed I want to do some operations.
How can I find mousewheel scrolling speed?
I've looked into this before, and there are three issues here.
Mouse wheel speed varies in how it is reported by the browser.
User preferences determine what impact each 'click' of a scroll has on a site.
There are some mouses that don't 'click' and instead spin freely, which gives weird numbers.
The combination of these three make this a rather useless metric to do anything useful with. One person could scroll 5 times and be at the bottom of your site, while another 30 times and only advanced one paragraph.
In my case, I use deltaY as a value. deltaY could be negative(scroll top) or positive(scroll down).
Convert the value to only positive number using Math.abs(event.deltaY) and you can use that as a speed.
Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.
We have developed a site whcih has a horizontal orientation and are wanting to implement touchpad control with two fingers move left/right.
When you move two fingers left/right on touchpad, the site page is being scrolled left/right. Now we have implemented touchpad control with two fingers move up/down and page scrolled left/right.
How can we change touchpad control with two fingers move from up/down to left/right to scroll site page left/right using js or jQuery?
I may be a little late but had the same question before I stumbled over this question.
A little further investigation lead me to think that the best bet to capture trackpad scrolling would be the wheel event.
function doScroll(e) {
// positive deltas are top and left
// down and right are negative
// horizontal offset e.deltaX
// vertical offset e.deltaY
console.log(`x:${e.deltaX} y:${e.deltaY}`);
e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);
I have prepared a fiddle that tells you the scroll direction and offset values but prevents the scrolling itself.
The wheel event has a delta property that (at least in Chrome) is sensitive to momentum and gives you the current relative scroll offset rather than the absolute scroll position available in the scroll event.
Usually when you want to take over touch events in script, you add something like this to prevent the usual scroll and zoom:
$("body").bind("touchstart", function(e) {
e.preventDefault();
})
What you need to do is change what can be scrolled. If your page is big enough where left/right scrolling makes sense, the browser will allow it be scrolled that way.
Basically, if you only want them scrolling in a certain direction, only make content in that direction. If necessary, you can achieve this by having a container div of the specific size you want with overflow set to none.
I've setup my app/website such that I have an absolute-positioned canvas element on top of a scrollpanel, when the scrollpanel scrolls I apply on offset to the canvas to make it look like the image is scrolling (this allows me to have huge canvas without the overhead of a huge canvas element). The problem is, when my mouse is over the canvas element, the scroll wheel does not work, since the scroll event does not bubble. In this case, however, I need the bubbling to get the scrollbar to work.
I'm using GWT for this, so I'd prefer not to rely on a jQuery solution (although a pure javascript solution would be ok) since it's kinda hard to mix the two. I can capture the mousewheel event, but the main problem with that is that it doesn't seem to differentiate between scrolling (up/down) and tilting of the wheel (left/right). I tried eventGetShiftKey(), eventGetButton(), eventGetType(), and some others but all those methods return the same exact result for scrolling and tilting (tilt left = scroll up, tilt right = scroll down).
It seems like the best way to handle this is to bubble the actual event to the scrollpanel (which by the way also contains the parent div that contains the absolute-positioned canvas), but I'm not sure if that's possible?
Mousewheel event does bubble, to differentiate between up/down scrolling use the event.wheelDelta and event.detail attributes.
MSDN: onmousewheel Event (IE, WebKit)
event.wheelDelta indicates the distance that the wheel button has rotated, expressed in multiples of 120. A positive value indicates that the wheel button has rotated away from the user. A negative value indicates that the wheel button has rotated toward the user.
MDC: DOMMouseScroll (Gecko)
event.detail specifies the number of "ticks" that the mouse wheel moved. Positive values mean down/right", negative up/left.
event.axis specifies the axis of the scroll gesture (horizontal or vertical). This attribute was added in Firefox 3.5
Also see this article which talks a bit about normalizing.