Not able to slide in IE 11

[doraemonyoung]

In IE 11, everything is loading fine except the slider stays in the middle and is not able to be dragged.

[JamieBradders]

Did anyone find a solution to this? I've just used this plugin for a project and stumbled across the same issue in testing :/

[AllenMay]

I just tested with IE11 (and emulated as IE9) and the plugin worked fine.

[JamieBradders]

@AllenMay I managed to get around the issue by changing the version of jQuery Event Move - it seems like the issue is with that dependency rather than the plugin itself. The errors I saw were surrounding Symbol more specifically https://github.com/zurb/twentytwenty/blob/master/js/jquery.event.move.js#L83 - there is a suitable polyfill here https://github.com/medikoo/es6-symbol which should also resolve the issue for legacy browsers that lack ES6 support - I imagine this issue can be closed now?

[loyko-vitaliy]

I have the same problem. This plugin use jQuery.event.move, which use ES6 feature such as Symbol and customEvent, so solution is add support for them in ie 11:

1. Use babel-polypill (for add support Symbol) https://babeljs.io/docs/usage/polyfill/
2. Use polypill for customEvent https://developer.mozilla.org/ru/docs/Web/API/CustomEvent/CustomEvent

[OneSprague]

@jamie-endeavour could I get a zip of your files that work in IE? I am still having a hard time getting it to run in IE11. Thanks.

[JamieBradders]

@OneSprague yes of course, I'll put something together this evening. The setup of the project I worked on meant resorting to an older version of jQuery Event Move - but as a result I noticed that newer versions of jQuery had conflicting issues as well... I'd stick with polyfill's if you can rather than reverting to older version of jQuery and jQuery.event.move but I'll try and put something in more detail together tonight - have you tried something like this (following on from @loyko-vitaliy's suggestion) https://github.com/krambuhl/custom-event-polyfill - see custom-event-polyfill.js ?

[OneSprague]

@jamie-endeavour Thanks - I gave that a try, but still no luck. I have re-downloaded twentytwenty and even it's index.html does not work in ie11, but strangely it works on their landing page? :(

[JamieBradders]

@OneSprague I managed to get this working with a Polyfill. I've tested in Browser stack and found this worked okay - I've only tested IE11 as didn't have much time like but I assume it should be okay, you'll need to check...

https://github.com/jamie-endeavour/twentytwenty

Feel free to fork this and let me know how it goes. The polyfill I used was https://polyfill.io/v2/docs/ - note that I've just included directly from the CDN.

[OneSprague]

I did manage to get it to work with the Polyfill from the CDN. Thank You!

[JamieBradders]

Awesome that's great news glad to have been of assistance @OneSprague!

[JamieBradders]

It would be cool if a core maintainer could add this gotcha to the documentation/examples. I've cloned this repo and created a branch locally but I'm unable to push a branch and therefore raise a PR. Can anyone advise on how to contribute as I'd be willing to do the above 😃

[ChrisWebWales]

Same issue, but even with the polyfill the slider isn't working on IE11. Could it potentially be any other jquery files that are clashing with it once minified!? Can't post a link to the site at the moment as it's not yet live, just under development. @jamie-endeavour

[JamieBradders]

@ChrisWebWales it sounds like it could be a conflict with a dependency are you getting any errors in the console? If so are you able to paste it here? Also what version of jQuery/jQuery.event.move are you using? I'm happy to take a look this weekend to see if I can help you figure out a work around?

[ChrisWebWales]

Hi Jamie. First up, thanks for your help.

Is it ok to look at it Monday? I've finished for the weekend, All the work is in my office and I have no way of retrieving it over the weekend.

Many thanks either way :)

On Fri, 18 Aug 2017 at 17:01, Jamie Bradley notifications@github.com wrote:

@ChrisWebWales https://github.com/chriswebwales it sounds like it could be a conflict with a dependency are you getting any errors in the console? If so are you able to paste it here? Also what version of jQuery/jQuery.event.move are you using? I'm happy to take a look this weekend to see if I can help you figure out a work around?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zurb/twentytwenty/issues/78#issuecomment-323393285, or mute the thread https://github.com/notifications/unsubscribe-auth/AdseNuF6rFZLMH7gvvP2Hh074rLr7rOsks5sZbUwgaJpZM4N9arj .

--

Kind Regards, Chris Broad

07947 346643

info@websolutionswales.com

www.websolutionswales.com

[loyko-vitaliy]

Create simple example with last version jQuery and other plugins...Try this in archive below, I'm tested on virtual mashine - all good work on ie 11. [sample.zip](https://github.com/zurb/twentytwenty/files/1235266/sample.zip)

[ChrisWebWales]

@loyko-vitaliy

Perfect, thank you very much, this fixed it.

[ChrisWebWales]

@loyko-vitaliy on resize is still a little funky as it doesn't adjust the height dynamically as it does in Chrome, but it's at worst functional which is brilliant.

[loyko-vitaliy]

ChrisWebWales, this can fixed by written styles. I'm not show example how you need write html and css..., only working plugin. Fix resize ... sample.zip

[raphaeleidus]

I believe this is now addressed in the library itself. I included a polyfill for customEvent and made the Symbol optional.