Mouse Scroll Events - javascript

I'm working on some code that detects when you are scrolling the mouse up or down. I want the user to scroll left and right, instead of up and down. My code detects the mouse movements and whether it is up and down. My question is, is there code in jQuery or Javascript that allows the user to scroll left or right based on when an event happens, aka the mouse scrolling up or down?

jQuery.mousewheel + jQuery.scrollTo.
.mousewheel(function(e, d, dx, dy) {
  $(this).scrollTo((dy<0?'+':'-')+'='+10*Math.abs(dy)+'px', 0, {axis: 'x'});
e.preventDefault();
});​
Demo.

Tie a function to your user mouse up movement and use jQuery's scrollTo plugin. Here's a tutorial detailing it: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Hope this helps!

Related

How to make work jquery "swipe" with scroll on iPad?

I have two divs, standing next to each other. In addition to click event I added a swiperight and swipeleft to do something. But when I add these swipe events, scroll doesn't work anymore on iPad. On PCs there's no problem!
Is there any other way to make them compatible with each other on iPad (touch screen devices)?
Merci!
Found a solution:
http://stephband.info/jquery.event.swipe/
Swipe events are a thin wrapper built on top of move events (stephband.info/jquery.event.move). Move events, by default, override native scrolling, as they assume that you want to move something rather than scroll the window. To re-enable scrolling, call e.preventDefault() inside a movestart handler.
In the example above, we want to be able to swipeleft and swiperight, but scroll up and down. Inside a movestart handler, the direction of the finger is moving is calculated and the event is prevented if it is found to be moving up or down::
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});

TouchSwipe - multiple events on one swipe

I'm using TouchSwipe jQuery plugin for mobile version of my site. I need to fire multiple click-events on one swipe, something like - on every 15px of swipe - one click. I've googled, but found no solution.
Thing is - I'm using carousel plugin for Joomla (sigplus), that, unfortunately, doesn't support finger swipe. I'm trying to emulate swiping function by making TouchSwipe pressing carousel buttons for user on swipe. At the moment I have such code:
jQuery(function($) {
$(".s2").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft:function(event, direction, distance, duration, fingerCount) {
$( '.boxplus-next' ).click();
},
swipeRight:function(event, direction, distance, duration, fingerCount) {
$('.boxplus-prev').click();
},
triggerOnTouchEnd:false,
threshold:15
});
});
It works fine, but scrolls only one image in carousel per touch. Maybe it's possible to restart function after triggering?
Thanks
P.S. Sorry for my English
To trigger continuous events, you should use the swipeStatus event instead: http://labs.rampinteractive.co.uk/touchSwipe/demos/Swipe_status.html
You can then trigger next or back, based on the distance.
See this answer for more info: Multiple swipe events on an element with TouchSwipe

Horizontal mousewheel events for left and right wheel spin

I'm using jQuery mousewheel plugin to fire different actions for each left and right wheelspins.
The Apple Magic Mouse horizontal wheel scroll have the same effect as mostly laptops trackpad, which you use two fingers to scroll page left and right.
And that action of left and right scroll fires page back and forward on history. This happens in all major browsers(Safari,Chrome,Opera and Firefox).
That's why I need to preventDefault scroll only on horizontal(deltaX) scrolling.
I can't disable Default horizontal spin without disabling vertical too.
Here's a fiddle reproducing the issue,
Please, access it and fire your horizontal mousewheel or trackpad horizontal scroll.
http://jsfiddle.net/YfwXw/
$(document).mousewheel(function(event, delta, deltaX, deltaY) {
if (deltaX > 10){
$(".square").addClass("animation");
}else if(deltaX < -10){
$(".square").removeClass("animation");
}
if (deltaY != 0){
//Anything that makes vertical wheelscroll keeps normal
}
// I have to preventDefault only the horizontal scroll, otherwise page will go back or go forward in history
event.preventDefault();
});
You can see I put some comments inside the code that helps you understand better my problem.
Basically all I need is something to preventDefault horizontal wheel action and keep the default vertical wheel.
More than 30 hours searching for solution without success, so I'll appreciate any help, I'm now really out of options.
New fiddle with solution 99% based on Nicklas Nygren answer.
http://jsfiddle.net/9VbgF/
if (deltaY == 0){
event.preventDefault();
}
Fiddle: http://jsfiddle.net/YfwXw/1/
You're doing preventDefault on all mousewheel events. Wrap it in your if statement instead and it will work:
if (deltaY != 0){
// Anything that makes vertical wheelscroll keeps normal
} else {
// Only prevent if scroll is not vertical
event.preventDefault();
}

How To detect swipe starting and ending position not touch event?

jQuery("#surface").bind("mousedown", function(e)
{
console.log("(x,y) = (" + e.pageX + "," + e.pageY +")");
});
I wrote this code but not track that it is touch event or swipe event.I want to call function which fired when swipe event start and end.When you touch a finger on iPad/iPhone and push and drag to left or right.I want finger touching starting position (x,y) cordinate and need (x,y) position when you drop a finger.
I also used jqTouch but it don't give me starting and ending position.
I want to make App which swipe page according to your finger.
------------ HTML ------------
<canvas id="surface">
// here goes all image pages
</canvas>
do you have any idea about how to detect swipe start and end event using jQuery or javascript but not touch event.
Have you looked at this plugin?
Also, if that's not feasible, what you're gonna need to do is set a timer on touchstart and touchend
FYI, I know jQuery plug site is broke, but you can find the download for that plugin here

Drag mouse events jittery - onmousemove

Working on a scrub bar for a chromeless player through youtube. I have the functionality working pretty much as Id like BUT when I click to drag the blue "seeker" button and drag it, it jumps back to its original position until I release the mouse click. Once I release, it starts the video at the appropriate position and draws the progress bar at the appropriate position too. code is here: http://jsfiddle.net/VysBU/1/
I also logged the position of the mouse and width of the progress bar (which is the part that jumps around) and the width values move consistently upward or downward on drag which doesn't make sense because visually, it jumps back and forth. Odd.
Any help is appreciated...if you need me to clarify something, let me know.
NOTE: just remembered...it tends to jump on vertical mouse movements only. ie, if i move the mouse horizontally without changing its vertical position at all, it 'animates' fine. if the vertical position does move, the 'animations' are erratic.
Check this out http://jsfiddle.net/sz4FF/
you need to stop the interval of
setInterval(animateProgress, 100);
when you begin seeking, and continue it when the seeking stops. The reason why it makes that jump is simply because animateProgress is called and sets the width of the playedBar and seeker.
I hastily added it to a global function (window.TEST_INTERVAL) just to check if it would work, and it does.
(how to initialize and clear the interval)
clearInterval(TEST_INTERVAL);
TEST_INTERVAL = setInterval(animateProgress, 100);
within seeking
function seeking(e){
clearInterval(TEST_INTERVAL);
within doneSeeking
function doneSeeking(e){
TEST_INTERVAL = setInterval(animateBuffer, 250);
UPDATE: IE8 and below problem
mousePos = e==undefined ? event.clientX : e.pageX;
//get the position of the mouse
//mousePos = e.pageX;
the event returned by onmousemove is "undefined" in ie7 and 8, that way we are checking for window.event.clientX, which shows the mouse position relative to the window. It seems to work fine but I believe that in a normal environment some minor tweaks might be needed

Categories