IE10 Touch doesn't work

[alirobe]

Hey, so just testing out flexslider on a Win8 slate PC here, and noticing that touch isn't behaving as expected in IE. Any chance of implementing the Microsoft touch API?

edit: here is some info on the touch API in IE10 http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx || http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx

I will be happy to be a tester if someone can try this out.

[saibayadon]

+1 on this one.

[saibayadon]

I know right now this seems a little bit dumb, but on the long run (think two years from now) Win8 Tablets are going to be a considerable number of devices online.

[lkmzkezokfp]

The only reason why it doesn't work is because in FlexSlider, swiping is only working with the proprietary touch events while it could very well support the standard mouse events, allowing to swipe the images of the slider even with the mouse's cursor and not only with the fingers.

A perfect example of what I'm describing is the Windows 8 Metro Interface: you can swipe almost everything, panels, apps, etc. but the magic is that you can swipe those elements whether you have a touch-enable device or not, in both case you can swipe all the elements using the mouse, simply by clicking and dragging anything.

The changes to make in order to make FlexSlider compatible with mouse-swipe are so little that you would not believe it. I have already suggested to mbmufffin (here: https://github.com/woothemes/FlexSlider/issues/172#issuecomment-7205327 ) to add mouse-support for swiping the slides, but he doesn't seem to be interested...

In the link above you'll find some working code examples for mouse-swipe support, and therefor Internet Explorer 10 support or ANY other device that is, or is not, touch-enabled. What can be swiped with the finger should have the possibility to be swiped with the mouse, Microsoft understood it, you should really try Windows 8.

Again, adding mouse-swipe support is as easy as adding event listeners for "onmousedown", "onmousemove", "onmouseup", and "onmouseout".

    this.addEventListener('mousedown', onTouchStart, false);

    this.addEventListener('mousemove', onTouchMove, false);
    this.addEventListener('mouseup', onTouchEnd, false);

    // For when the cursor moves out of the flexslider container
    this.addEventListener('mouseout', onTouchEnd, false);

Adding these event listeners will offer swipe gesture support for mouse users, like the Windows 8 Metro interface does, where you can slide things around using your mouse, not only your finger. I believe it is a huge improvement and I'm SURE you will implement this sooner or later, not because of me, but because the entire ecosystem is going to adapt to this new kind of interaction with the mouse as Windows 8 is released and more and more adopted. I'm not a Windows-fan nor defending anything, but trying the system surely provides you the feeling that this kind of mouse interaction is going to spread everywhere as more people try it.

[quantizor]

It doesn't work because IE10 uses a proprietary "Pointer" API to handle touch and mouse events together.

For more information: http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

[alirobe]

Evster88: ... did you get that link from my original comment? ;)

[levi3man]

when will we see support for touch in flexslider on Windows 8.

The changes to make in order to make FlexSlider compatible with mouse-swipe are so little that you would not believe it. I have already suggested to mbmufffin (here: #172 ) to add mouse-support for swiping the slides, but he doesn't seem to be interested...

Why should I take my hand off my touch screen and use my mouse to swipe, it doesn't make sense. I wouldn't be interested aswell if I was told I can't touch my screen to swipe but I must use a mouse

[levi3man]

this works well with touch http://samples.msdn.microsoft.com/iedevcenter/ZoomAndPan/scenario2.html

[fxalvarezd]

Hi guys, maybe one of you can help me out. I'm trying to implement those event listeners to fix the problem on IE10 (mobile), but I'm not sure where to add those. What should "this" be.

Thx!

[saibayadon]

You mean "this" as in the this from the comment above? Take a look at this link: http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx That is the documentation for the Pointer API that MS introduced on IE10 and touch devices with WP8 i think. Then you should be able to modify the code to accomodate the Pointer API.

:shipit:

[mattyza]

Hi all,

Please test the code found in the "develop" branch on this repository, as we've resolved Windows tablet touch events in this version, to be released soon.

Thanks and regards, Matty.

[fxalvarezd]

@brunolazzaro thanks for your message, I've been trying to bind the MS events like this if (window.navigator.msPointerEnabled) { el.addEventListener("MSPointerDown", onTouchStart, false); } else { el.addEventListener('touchstart', onTouchStart, false); }

But it's kinda hard to integrate all to the working plugin. I don't know how to map the e.touches.length to MS.

Hi @mattyza , I just tried the code from the develop branch, but still doesn't swipe on my windows 8 phone. I should use the uncompressed jquery.flexslider.js file updated 1 day ago right? Sorry to bother you but I'm desperate... :)

[mattyza]

@fxalvarezd - I am currently researching this further and looking into possible solutions.

The MSPointer events are tricky, as there also needs to be a check for how many pointers are active at a given time, as well as detecting X and Y co-ordinates, neither of which would be taken care of in the above-mentioned code snippet.

After we've done some internal testing, I'll publish the changes to the "develop" branch and then, if you could please, could you and @brunolazzaro please test the branch?

I'll update this comment when the branch is ready for testing.

[mattyza]

@fxalvarezd @brunolazzaro - I've done some initial testing and pushed an alpha version to the "develop" branch.

I don't have a Windows mobile device, myself. If you guys could please jump in and test the "develop" branch on your Windows devices, as well as submit any pull requests if you can see what I've missed, I'd appreciate that very much.

I've also corresponded with @mbmufffin on this to get his input on the branch.

Thanks guys. :)

[fxalvarezd]

@mattyza - I just tested the develop branch on windows phone and it still doesn't swipe. I'll dive into the code to see if I can find something. I made some changes to a previous version of the plugin and it moved a little bit, but not all the way :( This is what I did, I replaced all event listeners and all coordinates like this:

/_ORIGINAL CODE_/ //startX = (vertical) ? e.touches[0].pageY) : e.touches[0].pageX); //startY = (vertical) ? e.touches[0].pageX) : e.touches[0].pageY);

//el.addEventListener('touchmove', onTouchMove, false); //el.addEventListener('touchend', onTouchEnd, false); /**/

/_NEW CODE_/ if(vertical){ if (window.navigator.msPointerEnabled) { startX = e.pageY; startY = e.pageX; } else { startX = e.touches[0].pageY; startY = e.touches[0].pageX; } }else{ if (window.navigator.msPointerEnabled) { startX = e.pageX; startY = e.pageY; } else { startX = e.touches[0].pageX; startY = e.touches[0].pageY; } }

if (window.navigator.msPointerEnabled) { el.addEventListener("MSPointerMove", onTouchMove, false); el.addEventListener("MSPointerUp", onTouchEnd, false); } else { el.addEventListener('touchmove', onTouchMove, false); el.addEventListener('touchend', onTouchEnd, false); } /_NEW CODE_/

[mattyza]

@fxalvarezd - Thanks for your feedback. :)

You'll see in the "develop" branch that I've included two new variables- localX and localY. These variables use the e.touches[0].pageX and e.touches[0].pageY values and, if window.navigator.msPointerEnabled, they use e.pageX and e.pageY accordingly.

I've also added the necessary event listener adds and removes at the necessary points.

I suspect the issue to be at the conditional where I check the ! e.isPrimary. This is where we check if we're using a touch event or not... the first part of the check is for webkit devices, and the second part for Windows mobile.

If you could check that area as well, please, that would be amazing. :)

[fxalvarezd]

@mattyza - I'm getting an error with the new code: "Uncaught TypeError: undefined is not a function". I removed the factory portion at the top and the error was gone.

I thought the condition with "e.touches.length === 1" was the problem as well, but after adding an alert I can see that it's not getting inside the onTouchStart(e) function.

[mattyza]

@fxalvarezd - Thanks for your feedback. :)

I've removed the AMD support and added a check for the presence of the "MSPointerDown" event on line 17 of the jquery.flexslider.js file on the "develop" branch.

Please test on your end? :)

[fxalvarezd]

@mattyza - I added a couple notes on this file http://www.universalsolutionz.com/flexslider/jquery.flexslider-alpha.js , please look for "//***COMMENT:". With those changes the slide starts to move with the swiping motion, but it doesn't go all the way. I wish I could show you... :)

[fxalvarezd]

@mattyza - Hey man, good news, I changed the MSPointerUp with MSPointerOut and it works!! If we can figure out those comments those first two comments that I added I think it's good to go.

[fxalvarezd]

@mattyza This version is working for me, if you can take a look and let me know what you think http://www.universalsolutionz.com/flexslider/jquery.flexslider-fx.js Thx!!

[mattyza]

I will do so, thanks @fxalvarezd.

To confirm, all "next", "previous" and "swipe" events are working for you now on your Windows device?

For future reference, what device are you using to test?

[fxalvarezd]

@mattyza - yes, all is workig for me. I'm using an HTC 8x.

[mattyza]

@fxalvarezd Thanks! :)

I've gone through your adjusted copy of FlexSlider and merged/optimised the changes into the "develop" branch.

Could you please test this version and confirm that the touch and swipe events are all working?

Thanks! :)

[ecurtis]

Hi I am currently working on a client project and can report that the current dev branch is NOT working on a Lumia 920 Win 8 Phone and a Samsung Win8 Tablet. I would be very happy to check future tweaks as long as I have access to the devices.

I also checked fxalvarezd code directly without luck.

[mattyza]

Thanks for your feedback on this, Eric.

Based on the number of devices running Windows 8, it seems we may need to explore this further in future versions.

We'll continue to plug away at this, before and after version 2.2.0's release, and do our best to get full swipe compatibility on Windows Phone mobile devices. :)

[levi3man]

I will also test the develop branch on my Microsoft Surface and my Windows 8 PC with my touchscreen monitor. At the moment the slider is not responding to touch.

[bradbamford]

@fxalvarezd you said your fix worked on an HTC 8X phone, did you test it on a Windows 8 touch Desktop?

[fxalvarezd]

@bradbamford unfortunately it only works on the phone :(

[bradbamford]

I've been looking into this as well, if anyone else is just getting started, I found this helpful: http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx#Gesture_object_events

I also found this touch abstraction library called DeepTissue.js at http://deeptissuejs.com that includes support for SwipeLeft and SwipeRight on webkit and mspointer that's a good reference.

[mattyza]

Hi All,

Please test the code in the following branch: https://github.com/woothemes/FlexSlider/tree/feature-ie-touch

This is a merge of our "develop" branch and @sarvaje 's pull request.

Please confirm that this fixes IE10 touch issues on your machines.

Thanks and regards, Matty.

[mattyza]

@fxalvarezd @bradbamford @sarvaje - Please test the code in the https://github.com/woothemes/FlexSlider/tree/feature-ie-touch branch and advise if this works for you on your IE10 touch device.

We're looking to launch FlexSlider 2.2.0 quite soon and would very much like to confirm this fix prior to doing so.

Thanks guys. :)

[bradbamford]

It's somewhat functional, certainly an improvement, but not as fluid as it needs to be.

A swipe quickly moves the slide only about 80% (it varies) of the way, then a short pause happens before the slide slowly advances the final 20% of the way.

I noticed in Chrome this also kind of happens, but there is no pause and it happens so fast you don't notice it because it just works as you would expect.

If we can reduce/remove the pause that happens after the swipe, I think it will be perfect. Note: I've only tested it on a Samsung Slate (Build Version) running Windows 8.

[sarvaje]

@bradbamford I improve the behavior of IE10 touch. I test this improve in a Asus vivo tab RT and the pause doesn't happend now.

Can you test this update?

[mattyza]

Hi David,

Where is your update to the code? Did you submit a pull request to us?

[sarvaje]

yes, I do that, the pull request is #683

[bradbamford]

I've tested this and can confirm, this works great now!

[ladle3000]

2.2 Dev is mostly working. Except we have two sliders in a row, one for featured products and 1 for new products. Since 2.2 only the first carousel renders controls and images in Firefox latest. All other browsers everything works.

[ladle3000]

There is also this error given in firebug twice when loading the page: ReferenceError: onTouchStart is not defined /js/infortis/jquery/plugins/jquery.flexslider.min.js Line 396

[mattyza]

That error is due to using the minified file, which doesn't currently reflect the latest version.

Please test with the un-minified version of the code (this will be minified at release). :)

[ladle3000]

From here? https://github.com/woothemes/FlexSlider/tree/feature-ie-touch

[mattyza]

Yes, please. :)

[ladle3000]

That's the one I'm using, though I renamed it jquery.flexslider.min.js - I didn't actually minimize it.

[mattyza]

Noted, thanks.

Will keep a note of this error. I suspect this is purely a casualty of being branched off of an incorrect branch. :)

[mattyza]

I wouldn't use the development version in production (it is intended for development tracking only).

The code in the "master" branch is the only code that is 100% production ready, on this repository.

[ladle3000]

For what it's worth, simply removing this line el.addEventListener('touchstart', onTouchStart, false); from the file fixed the firefox issue for me. I've flushed caches on all devices I own (pcs, ipads, android, etc) and all seems to be working.

[mattyza]

Thanks for your feedback, @ladle3000 ! :)

[guschilds]

Since 2.2 only the first carousel renders controls and images in Firefox latest. https://github.com/woothemes/FlexSlider/issues/215#issuecomment-19902942

I'm experiencing this as well with Firefox on a touch-enabled Windows 8 device on the release-2-2-0 branch.

[mattyza]

Thanks for reporting.

Please note that FlexSlider 2.2.0 is not production ready (hence it is not on the master branch).

The master branch is the recommended, production-ready, version of FlexSlider. :)

[guschilds]

Understood!

Using release-2-2-0 for the improvement in IE10 touch support and haven't experienced any other negative side effects. Wish I could attempt to help solve this Firefox issue, but I don't own such a device myself (discovered it through someone else's). Can't seem to find a way to force Firefox to believe it is on a touch-enabled device.

Thanks for all your work on this.

[mattyza]

Thanks Gus. :)

If anyone reading this has a device of this nature, please do provide your feedback and/or a pull request to help fix the bug. :)