Is Flex slider 2 + the Views Slideshow plugin compatibile with Internet Explorer 10 (IE10)?
I'm not certain if this is Flex Slider or Flex Slider Views Slideshow issue but I've very recently upgraded both projects to Flex Slider 2 and all was/is working great until I upgraded my local dev machine (XAMPP/Windows 7 Ultimate 64bit) to IE10 and the whole show now stalls entirely. On the dev server the, currently installed Flex Slider 7.x-1.0-rc3 is also completely unresponsive when viewed on IE10 but continues to work fine on Chrome, Safari, etc.
By "unresponsive" I mean:
1. The images load and scale fine (the Views format is set to Slideshow/Flexslider) but
2. The slideshow doesn't autoplay; and
3. The displayed pager buttons don't respond to being clicked (although the css rollovers are working fine on them).
4. The enabled mouse and keyboard events are also unresponsive - but work fine on Chrome/Safari, etc.
5. Although, the next/forward group pager icons DO work.
Any thoughts?
If anyone could confirm they have this working fine in IE10 I can investigate further.
Thanks.
Q.
Comments
Comment #1
carlocoxx CreditAttribution: carlocoxx commentedThe flexslider works using IE 10 on my website after installing the jQuery update module and setting the version to use on 1.7. It doesn't work with the 1.8 version. Autoplay works but I didn't test the mouse and keyboard events. Hope this helps..
Comment #2
gittosj CreditAttribution: gittosj commentedThink this is a flexslider issue see here:
https://github.com/woothemes/FlexSlider/issues/413
https://github.com/woothemes/FlexSlider/issues/519
Comment #3
gittosj CreditAttribution: gittosj commentedOk - I've made a temporary fix. The issue is in the base flexslider js code in sites/all/libraries/flexslider. Fix / workaround is as follows:
1) Make the changes described in the link below to jquery.flexslider.js (if it helps I've included a snippet of my file with the additions commented):
https://github.com/woothemes/FlexSlider/issues/413
save the file and then move jquery.flexslider-min.js to jquery.flexslider-min.js.bak (in case you need it later) and then, whilst in the flexslider js directory, create a soft link to the file you've just edited as follows:
ln -s jquery.flexslider.js jquery.flexslider-min.js
So to explain we have hacked jquery.flexslider.js to work with IE10 and then fooled the drupal module into loading the hacked file rather than the minified version. Ugly but it seems to work.
Last step - clear your caches on browser and server (don't forget js aggregation etc) and then try it - it works!
Comment #4
gittosj CreditAttribution: gittosj commentedAs a follow-up and I haven't been able to analyse why this is - the current unpatched flexslider seems to working fine with IE10 on some of our sites and not on others so check before you make this change - it may not be necessary!
Comment #5
davidee CreditAttribution: davidee commentedIE 10 stil doesn't work for me. That means that the slideshow doesn't slide.
gittosj, I like to know what you exactly do. I dont fully get it.
Comment #6
gittosj CreditAttribution: gittosj commentedOK davidee. I probably explained poorly. The bug is in the flexslider javascript code, not the drupal module. The solution / temporary hack is to edit the javascript which is in you sites/all/libraries directory. In my case its in sites/all/libraries/flexslider.
I can't upload the full code to drupal.org but here is the link to my patched version (which I'll leave up for a few months) which I hope will save you some time:
http://www.gittos.com/jquery.flexslider.js
Steps:
1) Backup your sites/all/libraries/flexslider/ directory in case I've made a mistake or you do
2) Move/rename sites/all/libraries/flexslider/jquery.flexslider.js to (for example) jquery.flexslider.js.bak and then so the same for jquery.flexslider-min.js so it (for example) becomes jquery.flexslider-min.js.bak
3) Copy/download http://www.gittos.com/jquery.flexslider.js to sites/all/libraries/flexslider/
4) Fix the permissions on the new file (I use chmod -R 750 sites/all/libraries and chown -R [yourusername]:apache sites/all/libraries
5) Create a soft link to the new jquery.flexslider.js and call it jquery.flexslider-min.js to fool the browser so: ln -s jquery.flexslider.js jquery.flexslider-min.js (make sure you're in the flexslider directory when you do this)
6) Clear every browser and server cache you can and it should work!
In case of disaster copy your backed-up flexslider directory over the top of the borked files in sites/all/libraries/flexslider and try again or give up and get a beer!
Hope that helps and good luck.
Comment #7
markwerks CreditAttribution: markwerks commentedThanks so much gittosj!
Dropped this in and it works perfectly!
Comment #8
tim.abbott CreditAttribution: tim.abbott commentedThanks gittosj, works a treat!
Comment #9
davidee CreditAttribution: davidee commentedHello gittosj,
I tried your method several times and eventually gave up and got a beer, but still I like to know how to get this working. Can you upload your folder somewhere with everything set correctly? That would very kind.
When I follow al the steps my slideshow is gone and the images that should be in the slideshow are listed underneath each other.
Thanks in advance.
Davidee
Comment #10
gittosj CreditAttribution: gittosj commentedHi Davidee - Sounds like an issue with cacheing. Are you running boost? You may need to clear caches on both server and browser several times since the old javascript may be cached. I usually turn off caching, flush all caches, flush the browser cache, turn caching back on, refresh and all is fine.
I don't have access to the server at the moment but will see whether I can tar up the directory and preserve the symbolic links. Are you still having the same problem?
Comment #11
dnlt CreditAttribution: dnlt commentedAbout the issue with freezed slides, we upgraded to jquery 1.7 and then it got working.
I don't know if it solves the other issues.
I hope it help you!
Kind regards,
dnlt
Comment #12
davidee CreditAttribution: davidee commentedHello gittosj,
Yes, I still have the same problem I described. I cleared all the caches but that didn't help.
I thought I might have done something wrong creating the soft link. What I did: creating a new file with the name: jquery.flexslider-min.js and put the text: ln -s jquery.flexslider.js jquery.flexslider-min.js in it. Is that wright of did I do something wrong here?
And i don't know how to set the chown to -R [yourusername]:apache sites/all/libraries. I use FileZilla for FTP, how do I change the chown there?
Thanks in advance. Davidee
Comment #13
Carol_ina CreditAttribution: Carol_ina commentedThank you very much carlocoxx!! I install the jQuery update module and Flexslider started to work properly. It even solved another problem I had with the Galleria module on IE :)
Comment #14
davidee CreditAttribution: davidee commentedHello Carol Lina, can you tell me witch jQuery update of give a link? Thanks
Comment #15
dnlt CreditAttribution: dnlt commentedHello davidee,
jQuery Update is a drupal module that helps to keep updated jquery libraries and its load.
The project URL is https://drupal.org/project/jquery_update .
I'd wish to add that Flexslider didn't work with highcharts (didn't change diapos with charts inside) until we updated jquery_update to its last version.
Comment #16
davidee CreditAttribution: davidee commentedHello dnlt,
Thank you very much for the information! I will install the jQuery Update module wright away!
Comment #17
davidee CreditAttribution: davidee commentedOh yeah! Installing jQuery Update module and updating jquery version worked:) Thanks for the help everybody!
Comment #18
brunorios1 CreditAttribution: brunorios1 commentedworked for me too.
Comment #19
minorOffense CreditAttribution: minorOffense commentedIf anyone is interested in writing some docs in the REAMDE file about this and submitting a patch that would be great!
Comment #20
minorOffense CreditAttribution: minorOffense commentedI added a note in the README about it.
Comment #21
smallcoder CreditAttribution: smallcoder commentedYep patch and Jquery update set to 1.7 solved this - nice one gittosj !
Comment #23
jboeger CreditAttribution: jboeger commentedjquery update >> 1.7 worked for me too. thanks!
Comment #24
joelhsmith CreditAttribution: joelhsmith commentedThanks @gittosj
Comment #25
snlnz CreditAttribution: snlnz commentedI can confirm both methods work.
1. Making the edits in the JS
2. Updating jquery_update to 1.7
Thanks everyone who helped fix this had me chasing my tale for days.
Comment #26
DarkteK CreditAttribution: DarkteK commentedThx so much gittosj your code worked for me !!! IE10 is working now
Comment #27
Spiffo CreditAttribution: Spiffo commentedI would just like to add another thank you to gittosj. That modified code file helped me with the responsive green theme not animating slides in IE 10.
Comment #28
scottybruce CreditAttribution: scottybruce commented#1 Worked for me using the slider that comes with the responsive green theme.
Comment #29
gittosj CreditAttribution: gittosj commentedJust a quick note to anyone now still struggling with this. If you update the flexslider js you use in sites/all/libraries to the latest version then I believe the issue disappears. It certainly is for me so we could set this issue to closed now?