Develop Reference

Video on mousemove

I'm having problems while trying to play a video as long as mouse moves. I want it's time to follow mouse, as if the mouse was the time handler.
I have this code. It works fine on Internet Explorer but on Chrome or Mozi time is not fluid, as it has something to do with refreshing times. Video plays with difficult.
<script type="text/javascript">
var mouseX;
$(document).mousemove( function moveFunc(e) {
mouseX = e.clientX;
var timV = $(".video").get(0).duration;
var valV = (timV*mouseX/$(window).width());
$(".video").get(0).currentTime = valV;
});
</script>
Could you help me?

Firefox and Chrome stopped firing mousemove events for every mouse position update on the window and document in an attempt to make pages more responsive.
You can fix it by binding your event to something more specific like the video element itself or any wrapper element.

Restricting Kendo Grid to scroll in one direction at a time on touch screen

When a user is on a touch screen device, I'd like to restrict diagonal scrolling - so the idea is to force scrolling one direction at a time - horizontal or vertical.
I've set up a JS Fiddle that detects if touch scrolling is enabled and I'm able to output the x and y coordinates. But I don't see an offset or anything and figure I need that to calculate the intended direction.
I know that apple uses a directionalLockEnabled that will restrict, so I'm wondering if something like this is available in Kendo. If not, maybe there's a way I can figure out which direction the user is intending to scroll in and 'freeze' the other coordinate.
A JS fiddle I created (relevant part in the dataBound method):
http://jsfiddle.net/dmathisen/tskebcqp/
(the relevant code only works on touch... but should work if you enable mobile emulation in dev tools)
Another issue is the amount of times the scroll event is triggered. When working, maybe I can set up a debounce to handle how often it's triggered.

If you want to use javascript for this fix, you can calcul the ranges of the X and Y moves.
For that with touch devices, set the start posi X and Y when touchstart and calcul the distances when touchmove
var touchY = touchX = 0;
$(document).delegate('.yourWrap', 'touchstart', function(e){
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
$(document).delegate('.yourWrap', 'touchmove', function(e){
if (Math.abs(touchX - e.originalEvent.touches[0].pageX)
> Math.abs(touchY - e.originalEvent.touches[0].pageY)) {
// Block overflow-y
} else {
// Block overflow-x
}
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
For wheel devices, compare delta
(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)

Detect touch events in Chrome on Windows 8 with touchscreen

I built a touch/mouse friendly jQuery plugin. It works on phones(ios, android...) and desktops browsers. But i have some issues with Windows 8 Chrome installed on laptop with touch screen. Unfortunately i dont have such a device and cant do any tests.Also IE10 works fine.
Let me explain you what i have inside(very simplified code):
1.Check is touch device:
base.isTouch = ("ontouchstart" in document.documentElement);
2.Get proper events
if(base.isTouch === true){
//use touch events:
"touchstart.owl",
"touchmove.owl",
"touchend.owl"
} else {
//usemouse events
"mousedown.owl",
"mousemove.owl",
"mouseup.owl"
}
3.Check touch events:
if(base.isTouch === true){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
link to real code
I think problem with chrome is that detect my touch events but use mouse events instead and translate them to touch.
I can add mouse and touch events together:
$('elem').on('mousedown.owl touchstart.owl',func);
Which is OK but then i have a problem with event.touches[0].pageX
link to plugin landing page
Thanks!
Problem solved
To get mouse and touch events working together on windows 8 chrome with touchscreen i had to:
1.add two events on one element "touchstart.owl mousedown.owl"
2.check "event.touches":
if(event.touches){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}

To get mouse and touch events working together on windows 8 chrome with touchscreen i had to:
1.add two events on one element "touchstart.owl mousedown.owl"
2.check "event.touches":
if(event.touches){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}

The simplest solution is to include Touch Punch plug-in http://touchpunch.furf.com/
I did it for my project and it works well - U can test it, here is my project:
http://englishtotheworld.com/

Android browser touch event location

On Safari, you can get the location of where the user touched the screen from event.pageX and event.pageY. However, on my Android browser, event.pageX and event.pageY are always 0. Is there any way to get the location of a touch event in the browser on Android?

This is from memory, since I don't own an Android device anymore, but I think it's right. At the very least, it should get you started in the right direction. Good luck.
var elem = document.getElementById('elem');
elem.addEventListener('touchend', function(e){
var pageX = e.changedTouches[0].pageX,
pageY = e.changedTouches[0].pageY;
}, false);

How can I react when a user touches an HTML element on an iPhone?

I'm displaying some HTML content in my iPhone app using a UIWebView. I have an image link, and I want it to change when the user touches it - at the moment the user puts a finger on the screen, rather than waiting until they lift their finger back off.
What CSS or JavaScript concept could accomplish this? I've looked at the hover and active states in CSS, but they don't seem to be what I'm after: hover relates to touch-up rather than touch-down, while active seems to have no effect at all.

You could try this.
I think it should be what you are looking for!
http://articles.sitepoint.com/article/iphone-development-12-tips/2
8: Touch Events
Of course, you use your iPhone with a
finger instead of a mouse; rather than
clicking, you tap. What’s more, you
can use several fingers to touch and
tap. On the iPhone, mouse events are
replaced by touch events. They are:
touchstart
touchend
touchmove
touchcancel (when the system cancels the touch)
When you subscribe to any of those
events, your event listener will
receive an event object. The event
object has some important properties,
such as:
touches — a collection of touch objects, one for each finger that
touches the screen. The touch objects
have, for example, pageX and pageY
properties containing the coordinates
of the touch within the page.
targetTouches — works like touches, but only registers touches on
a target element as opposed to the
whole page.
The next example is a simple
implementation of drag and drop. Let’s
put a box on a blank page and drag it
around. All you need to do is
subscribe to the touchmove event and
update the position of the box as the
finger moves around, like so:
window.addEventListener('load', function() {
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2, // half the box width
ybox = b.offsetHeight / 2, // half the box height
bstyle = b.style; // cached access to the style object
b.addEventListener('touchmove', function(event) {
event.preventDefault(); // the default behaviour is scrolling
bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
}, false);
}, false);
The touchmove event listener first cancels the default behavior of the finger move—otherwise Safari will scroll the page. The collection event.targetTouches contains a list of data for each finger currently on the target div element.
We only care about one finger, so we use event.targetTouches[0]. Then pageX gives us the X coordinate of the finger. From this value we subtract half the width of the div so that the finger stays in the center of the box.
Hope it helps!

Try the Javascript "onMouseDown", hopefully the mobile Safari will fire the event.
Link