IE10 Touch doesn't work #215

Closed
alirobe opened this Issue Jul 3, 2012 · 69 comments

Comments

Projects
None yet
@alirobe

alirobe commented Jul 3, 2012

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.

@brunolazzaro

This comment has been minimized.

Show comment Hide comment
@brunolazzaro

brunolazzaro Sep 14, 2012

+1 on this one.

+1 on this one.

@brunolazzaro

This comment has been minimized.

Show comment Hide comment
@brunolazzaro

brunolazzaro Sep 14, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@lkmzkezokfp

lkmzkezokfp Sep 16, 2012

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: woothemes#172 (comment) ) 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.

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: woothemes#172 (comment) ) 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.

@probablyup

This comment has been minimized.

Show comment Hide comment
@probablyup

probablyup Nov 7, 2012

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

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

This comment has been minimized.

Show comment Hide comment
@alirobe

alirobe Nov 8, 2012

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

alirobe commented Nov 8, 2012

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

@levi3man

This comment has been minimized.

Show comment Hide comment
@levi3man

levi3man Nov 30, 2012

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

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 comment has been minimized.

Show comment Hide comment
@fxalvarezd

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 12, 2013

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!

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!

@brunolazzaro

This comment has been minimized.

Show comment Hide comment
@brunolazzaro

brunolazzaro Feb 12, 2013

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:

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 13, 2013

Member

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.

Member

mattyza commented Feb 13, 2013

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.

@mattyza mattyza closed this Feb 13, 2013

@fxalvarezd

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 13, 2013

@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... :)

@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 mattyza reopened this Feb 14, 2013

@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 14, 2013

Member

@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.

Member

mattyza commented Feb 14, 2013

@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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 14, 2013

Member

@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. :)

Member

mattyza commented Feb 14, 2013

@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

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 14, 2013

@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 - 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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 14, 2013

Member

@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. :)

Member

mattyza commented Feb 14, 2013

@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

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 14, 2013

@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 - 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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 15, 2013

Member

@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? :)

Member

mattyza commented Feb 15, 2013

@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

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 15, 2013

@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... :)

@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

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 15, 2013

@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.

@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

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 15, 2013

@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 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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 16, 2013

Member

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?

Member

mattyza commented Feb 16, 2013

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

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd Feb 16, 2013

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

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

@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 18, 2013

Member

@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! :)

Member

mattyza commented Feb 18, 2013

@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

This comment has been minimized.

Show comment Hide comment
@ecurtis

ecurtis Feb 19, 2013

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.

ecurtis commented Feb 19, 2013

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Feb 19, 2013

Member

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. :)

Member

mattyza commented Feb 19, 2013

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

This comment has been minimized.

Show comment Hide comment
@levi3man

levi3man Feb 19, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@bradbamford

bradbamford May 1, 2013

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

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

@fxalvarezd

This comment has been minimized.

Show comment Hide comment
@fxalvarezd

fxalvarezd May 1, 2013

@bradbamford unfortunately it only works on the phone :(

@bradbamford unfortunately it only works on the phone :(

@bradbamford

This comment has been minimized.

Show comment Hide comment
@bradbamford

bradbamford May 3, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza May 8, 2013

Member

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.

Member

mattyza commented May 8, 2013

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza May 16, 2013

Member

@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. :)

Member

mattyza commented May 16, 2013

@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

This comment has been minimized.

Show comment Hide comment
@bradbamford

bradbamford May 16, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@sarvaje

sarvaje May 20, 2013

Contributor

@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?

Contributor

sarvaje commented May 20, 2013

@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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza May 20, 2013

Member

Hi David,

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

Member

mattyza commented May 20, 2013

Hi David,

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

@snoroozi

This comment has been minimized.

Show comment Hide comment
@snoroozi

snoroozi Jun 24, 2013

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.

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.

@snoroozi

This comment has been minimized.

Show comment Hide comment
@snoroozi

snoroozi Jun 24, 2013

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

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jun 24, 2013

Member

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). :)

Member

mattyza commented Jun 24, 2013

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). :)

@snoroozi

This comment has been minimized.

Show comment Hide comment
@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jun 24, 2013

Member

Yes, please. :)

Member

mattyza commented Jun 24, 2013

Yes, please. :)

@snoroozi

This comment has been minimized.

Show comment Hide comment
@snoroozi

snoroozi Jun 24, 2013

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

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

@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jun 24, 2013

Member

Noted, thanks.

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

Member

mattyza commented Jun 24, 2013

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jun 24, 2013

Member

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.

Member

mattyza commented Jun 24, 2013

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.

@snoroozi

This comment has been minimized.

Show comment Hide comment
@snoroozi

snoroozi Jun 24, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jun 24, 2013

Member

Thanks for your feedback, @ladle3000 ! :)

Member

mattyza commented Jun 24, 2013

Thanks for your feedback, @ladle3000 ! :)

mattyza added a commit that referenced this issue Jul 2, 2013

Merge pull request #683 from sarvaje/feature-ie-touch
Improve IE10 touch experience. issue #215
@guschilds

This comment has been minimized.

Show comment Hide comment
@guschilds

guschilds Jul 10, 2013

Since 2.2 only the first carousel renders controls and images in Firefox latest. woothemes#215 (comment)

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

Since 2.2 only the first carousel renders controls and images in Firefox latest. woothemes#215 (comment)

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

@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jul 10, 2013

Member

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. :)

Member

mattyza commented Jul 10, 2013

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

This comment has been minimized.

Show comment Hide comment
@guschilds

guschilds Jul 10, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Jul 10, 2013

Member

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. :)

Member

mattyza commented Jul 10, 2013

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. :)

@tiffanybroadbent

This comment has been minimized.

Show comment Hide comment
@tiffanybroadbent

tiffanybroadbent Aug 19, 2013

Using the 2.2.0 release, If you move the event listener declaration on line 397:

el.addEventListener('touchstart', onTouchStart, false);

to be below the onTouchStart function declaration, all browsers for Windows 8/touch-enabled appear to be happy, including Firefox.

Using the 2.2.0 release, If you move the event listener declaration on line 397:

el.addEventListener('touchstart', onTouchStart, false);

to be below the onTouchStart function declaration, all browsers for Windows 8/touch-enabled appear to be happy, including Firefox.

@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Aug 20, 2013

Member

Thanks for your excellent feedback, Tiffany! :)

Everyone else out there with Windows 8 touch-enabled devices, please test the fix provided by Tiffany and advise if this works for you as well.

Member

mattyza commented Aug 20, 2013

Thanks for your excellent feedback, Tiffany! :)

Everyone else out there with Windows 8 touch-enabled devices, please test the fix provided by Tiffany and advise if this works for you as well.

@nemzes

This comment has been minimized.

Show comment Hide comment
@nemzes

nemzes Aug 21, 2013

Please note that the issue mentioned above re. Firefox is not related to the order of the function declarations, but due to the fact of them being declared within a block — which breaks the ECMAScript spec. See #806.

nemzes commented Aug 21, 2013

Please note that the issue mentioned above re. Firefox is not related to the order of the function declarations, but due to the fact of them being declared within a block — which breaks the ECMAScript spec. See #806.

@mattyza

This comment has been minimized.

Show comment Hide comment
@mattyza

mattyza Aug 22, 2013

Member

Thanks for your additional clarification, @nelsonmenezes. I see you've submitted a pull request to remedy this.

We'll get it merged into a development branch soonest and we can all test from there. :)

Member

mattyza commented Aug 22, 2013

Thanks for your additional clarification, @nelsonmenezes. I see you've submitted a pull request to remedy this.

We'll get it merged into a development branch soonest and we can all test from there. :)

@alirobe alirobe referenced this issue in senchalabs/jQTouch Aug 27, 2013

Closed

- #496

@edraven

This comment has been minimized.

Show comment Hide comment
@edraven

edraven Sep 5, 2013

On a Windows Mobile Phone (Nokia Lumia 920) using flexslider 2.1, it won't swipe at all, but you can still scroll down the page. Using flexslider 2.2, it will swipe, but it prevents scrolling down the page, perhaps because the entire top of the page is a flexslider carousel. Works fine on Android, but on Windows Mobile it'll try to select text when you swipe to scroll down, or nothing will happen. Sometimes, very rarely when you have some text highlighted it will scroll down, but I can't figure out how to reproduce it. Anyone have an idea on how to solve this?

edraven commented Sep 5, 2013

On a Windows Mobile Phone (Nokia Lumia 920) using flexslider 2.1, it won't swipe at all, but you can still scroll down the page. Using flexslider 2.2, it will swipe, but it prevents scrolling down the page, perhaps because the entire top of the page is a flexslider carousel. Works fine on Android, but on Windows Mobile it'll try to select text when you swipe to scroll down, or nothing will happen. Sometimes, very rarely when you have some text highlighted it will scroll down, but I can't figure out how to reproduce it. Anyone have an idea on how to solve this?

@FriendlyWP

This comment has been minimized.

Show comment Hide comment
@FriendlyWP

FriendlyWP Sep 12, 2013

@tiffanybroadbent's fix works for me on Windows 8 on all browsers (Chrome 29, FF 23, IE 8/9/10). Any news on when this fix will be pushed out? Thanks!

@tiffanybroadbent's fix works for me on Windows 8 on all browsers (Chrome 29, FF 23, IE 8/9/10). Any news on when this fix will be pushed out? Thanks!

@oilvier

This comment has been minimized.

Show comment Hide comment
@oilvier

oilvier Nov 8, 2013

@edraven I have the same problem on Nokia Lumia 520.
I'll be glad to have a solution to fix this as well

oilvier commented Nov 8, 2013

@edraven I have the same problem on Nokia Lumia 520.
I'll be glad to have a solution to fix this as well

@sailenk

This comment has been minimized.

Show comment Hide comment
@sailenk

sailenk Nov 13, 2013

@edraven @oilvier We are having same problem with Nokia 925 Windows 8, swipe works fine but can't scroll up and down. Any updates on this?

sailenk commented Nov 13, 2013

@edraven @oilvier We are having same problem with Nokia 925 Windows 8, swipe works fine but can't scroll up and down. Any updates on this?

@jonnott

This comment has been minimized.

Show comment Hide comment
@jonnott

jonnott Nov 29, 2013

Can we have a minor release with this Firefox/Firebug onTouchStart error problem fixed?

jonnott commented Nov 29, 2013

Can we have a minor release with this Firefox/Firebug onTouchStart error problem fixed?

@sheltonjb

This comment has been minimized.

Show comment Hide comment
@sheltonjb

sheltonjb Dec 10, 2013

Same problem as Olivier here, on the same device. Nokia Lumia 520. it scrolls down the page fine, until the moment you scroll sideways through the carousel. once that action has been done it losesthe ability to scroll down the page. seems to be it can do one or the other, not both.

Same problem as Olivier here, on the same device. Nokia Lumia 520. it scrolls down the page fine, until the moment you scroll sideways through the carousel. once that action has been done it losesthe ability to scroll down the page. seems to be it can do one or the other, not both.

@todesstoss

This comment has been minimized.

Show comment Hide comment
@todesstoss

todesstoss Dec 10, 2013

for version 2.2 to allow scroll down the page you should change
el.style.msTouchAction = "none"; line 470 to this code:

el.style.msTouchAction = "pan-y";

but also you can fix it from css adding new style for flexslider container
flexslider{touch-action: pan-y !important; if u don't want change plugin's code directly.

I have another issue with windows phone: if slider elements wrapped in link element, after each slide it redirects me to this link, i want to use this links only on touch, not move.
flexslider>ul.slides>li>a>[img/or any other content]

for version 2.2 to allow scroll down the page you should change
el.style.msTouchAction = "none"; line 470 to this code:

el.style.msTouchAction = "pan-y";

but also you can fix it from css adding new style for flexslider container
flexslider{touch-action: pan-y !important; if u don't want change plugin's code directly.

I have another issue with windows phone: if slider elements wrapped in link element, after each slide it redirects me to this link, i want to use this links only on touch, not move.
flexslider>ul.slides>li>a>[img/or any other content]

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Dec 12, 2013

I did get the same error, but on android devices using the flexslider on firefox. The error was: ReferenceError: onTouchStart is not defined @ http:/.........../js/woothemes-FlexSlider-ca347d4/jquery.flexslider.js:397

What happend was that the call: el.addEventListener('touchstart', onTouchStart, false);
was calling the onTouchStart that was defined after it is called.
The fix is to place it under the function, and all works fine, )

ghost commented Dec 12, 2013

I did get the same error, but on android devices using the flexslider on firefox. The error was: ReferenceError: onTouchStart is not defined @ http:/.........../js/woothemes-FlexSlider-ca347d4/jquery.flexslider.js:397

What happend was that the call: el.addEventListener('touchstart', onTouchStart, false);
was calling the onTouchStart that was defined after it is called.
The fix is to place it under the function, and all works fine, )

@sheltonjb

This comment has been minimized.

Show comment Hide comment
@sheltonjb

sheltonjb Dec 17, 2013

Thanks very much todesstoss, that worked perfectly.

what implentations does that have though? would it originally have been none? must have been a reason.

cheers

Thanks very much todesstoss, that worked perfectly.

what implentations does that have though? would it originally have been none? must have been a reason.

cheers

@todesstoss

This comment has been minimized.

Show comment Hide comment
@todesstoss

todesstoss Dec 17, 2013

I think it's simple mistake, u can read more about this property here: http://msdn.microsoft.com/en-us/library/ie/hh772044(v=vs.85).aspx
none: The element permits no default touch behaviors.
but we need permition on the vertical axis.

I think it's simple mistake, u can read more about this property here: http://msdn.microsoft.com/en-us/library/ie/hh772044(v=vs.85).aspx
none: The element permits no default touch behaviors.
but we need permition on the vertical axis.

@shekhar87

This comment has been minimized.

Show comment Hide comment
@shekhar87

shekhar87 Dec 26, 2013

Thanks! @todesstoss .. It worked for me..:)

Thanks! @todesstoss .. It worked for me..:)

@oilvier

This comment has been minimized.

Show comment Hide comment
@oilvier

oilvier Jan 3, 2014

Thank you @todesstoss, it also worked for me !

Cheers ;)

oilvier commented Jan 3, 2014

Thank you @todesstoss, it also worked for me !

Cheers ;)

@richiebee

This comment has been minimized.

Show comment Hide comment
@richiebee

richiebee Feb 11, 2014

so what is the correct fix to enable touch sliding on windows 8 -"The fix is to place it under the function, and all works fine, )" can someone provide the correct code and where to replace/add please?

so what is the correct fix to enable touch sliding on windows 8 -"The fix is to place it under the function, and all works fine, )" can someone provide the correct code and where to replace/add please?

@remayex

This comment has been minimized.

Show comment Hide comment
@remayex

remayex Mar 4, 2014

Thanks barry76, your fix is working perfectly
It was competly breaking Flexslider on Firefox for Android
Altough it was not exactly the subject of this issue, please add this fix to next versions.
Thanks

remayex commented Mar 4, 2014

Thanks barry76, your fix is working perfectly
It was competly breaking Flexslider on Firefox for Android
Altough it was not exactly the subject of this issue, please add this fix to next versions.
Thanks

@timbouchard

This comment has been minimized.

Show comment Hide comment
@timbouchard

timbouchard May 6, 2014

@todesstoss good fix for the Y axis scroll!

@todesstoss good fix for the Y axis scroll!

@jeffikus jeffikus closed this Apr 1, 2015

todesstoss pushed a commit to todesstoss/FlexSlider that referenced this issue Nov 6, 2015

todesstoss pushed a commit to todesstoss/FlexSlider that referenced this issue Nov 6, 2015

todesstoss pushed a commit to todesstoss/FlexSlider that referenced this issue Nov 6, 2015

todesstoss pushed a commit to todesstoss/FlexSlider that referenced this issue Nov 6, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment