FlexSlider not showing on IE9

[plainspace]

Having an issue with FlexSlider not displaying. Random. Can't figure it out. It works on most machines I've tested. Windows 7, IE 9. Can you take a look?

http://bit.ly/Y9Tbw

[plainspace]

just checking...

[tnorthcutt]

Working for me in IE9, win7.

[plainspace]

thanks for looking. me too. unfortunately the person I developed the site for isnt seeing it on one of their machines. I wonder if it could a 64 bit vs. non issue. not a windows expert here though.

[tnorthcutt]

I seriously doubt 64/32 bit would affect it, FWIW.

[plainspace]

It is bazaar. That is the only diff between the machine it is working on and the machine that it isn't working on that I've been able to come up with. They are both brand new too.

[Arelam]

In case you still haven't figured it out, it might be the compatibility layer in IE9 trying to render with IE7 standards.

Add following line in the header tags to force IE to render in the latest document mode. < meta http-equiv="X-UA-Compatible" content="IE=edge" />

Ref: http://msdn.microsoft.com/en-us/library/ms533876(v=vs.85).aspx (First time I try helping people on GitHub)

[plainspace]

Hey mate,

Thanks for suggesting this. I tried it and the word is that it is still not working...

Jared

On Feb 19, 2012, at 6:42 PM, Arelam wrote:

In case you still haven't figured it out, it might be the compatibility layer in IE9 trying to render with IE7 standards.

Add following line in the header tags to force IE to render in the latest document mode.

Ref: http://msdn.microsoft.com/en-us/library/ms533876(v=vs.85).aspx (First time I try helping people on GitHub)

---

Reply to this email directly or view it on GitHub: https://github.com/mbmufffin/FlexSlider/issues/57#issuecomment-4047590

[kdubya16]

I am also having this issue. I am using the slider in Chris Coyier's/Eric Meyer's iteration of the HTML5 Reset WP theme. The < meta http-equiv="X-UA-Compatible" content="IE=edge" /> is used, but what is happening is that, in IE9, all of the images appear on top of one another. To have it display correctly in IE9, you must click the 'Compatibility View' button next to the URL box.

Is there a way to force this 'Compatibility View' in IE?

The slider works fine in every other browser I am developing for (FF, Safari, Opera, Chrome, IE8) with the exception of IE9.

Any push in the right direction will be greatly appreciated. Thanks

[plainspace]

not working for me either. would this work instead?

<!– Force IE9 to IE8 compatibility mode –>

<!– Force IE9 to IE7 compatibility mode –>

does it interfere with this:

via: http://sitecorebasics.wordpress.com/2011/04/16/forcing-ie9-users-to-users-to-compatibility-mode/

[kdubya16]

Thanks, plainspace

I tried adding the code provided in the link above but still no dice.

[tylernotfound]

I've never had any trouble with IE9. I'm not sure I follow what is going on with this issue.

[plainspace]

FWIW we are still having the issue. Do you want to see a link?

[tylernotfound]

Yes, I'd love a link!

[plainspace]

Cool. Just sent one.

[tylernotfound]

I'm closing this ticket for now, as there is no clear discernable issue at hand. Feel free to re-open the ticket if you can pin-point what might be going on.

[pkmelee337]

Had the same issue. Didn't you get a warning from IE? My problem was a ',' to much in the advanced options of flexslider.

[plainspace]

No warning. How did you solve this? What do you mean by "a ',' to much in the advanced options..."?

[tylernotfound]

He might be referring to a trailing comma after the last property in his .flexslider() call.

[pkmelee337]

You have to seperate the advance options with a ",". But I dit put a "," after the last option too. When I removed that last "," the problem was solved ;-)

[pkmelee337]

Thats indeed what I meant!

[plainspace]

gents i'm missing this. here is the call we are using. can you take a look?

'''

/-----------------------------------------------------------------------------------/ /* FlexSlider - http://flex.madebymufffin.com/ /-----------------------------------------------------------------------------------/

    $('.flexslider').flexslider({
        animation: "slide",              //Select your animation type (fade/slide)
        slideshow: true,                //Should the slider animate automatically by default? (true/false)
        slideshowSpeed: 7000,           //Set the speed of the slideshow cycling, in milliseconds
        animationDuration: 500,         //Set the speed of animations, in milliseconds
        directionNav: true,             //Create navigation for previous/next navigation? (true/false)
        controlNav: true,               //Create navigation for paging control of each clide? (true/false)
        keyboardNav: true,              //Allow for keyboard navigation using left/right keys (true/false)
        touchSwipe: true,               //Touch swipe gestures for left/right slide navigation (true/false)
        prevText: "Previous",           //Set the text for the "previous" directionNav item
        nextText: "Next",               //Set the text for the "next" directionNav item
        randomize: false,                //Randomize slide order on page load? (true/false)
        slideToStart: 0,                //The slide that the slider should start on. Array notation (0 = first slide)
        pauseOnAction: true,            //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
        pauseOnHover: false,            //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
        controlsContainer: ".flexslider-container"           //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
    });

'''

[pkmelee337]

Hmm, i'm sorry. That seems correct to me ;-)

[plainspace]

Tyler?

[rboc]

I ran into a problem with IE9 not executing the flexslider properly and after some debugging, I discovered that the jquery javascript needed to be located up in the HEAD section of the web page.

The following page loaded fine and the jquery was located up in the HEAD section: http://www.woothemes.com/flexslider/

The flexslider Demo page did NOT load fine and the jquery javascript was located at the bottom of the web page: http://flexslider.woothemes.com/

Perhaps the Woothemes.com folks want to change their demo page(?)

***note that I had to clear all of the cache in the IE9 browser in order to get it to fail the first time...and the failure is consistent.

Hope this helps anyone that may be utilizing the demo code to build their flexslider page.

[olach]

I also had a problem where the Flexslider would not be shown in IE9. It seemed to only be problem when the animation was set to 'slide'.

Moving the jQuery library to the head-section of the webpage solved the problem.

EDIT: After more testing, moving jQuery to the top does not solve the problem for me. In about 50% of the time, the flexslider wont show up in IE9. Weird.

[olach]

Ok, I think I have nailed down the problem to jQuery 1.8.0. Downgrading to jQuery 1.7.2 solves the problem. Now the flexslider shows up fine in IE9 again.

[hshaik72]

hi there, has anyone found a solution that works for this slider? iv tried the last recommendation (downgrading to jQuery1.7.2), doesnt work

Tx

[chrswyatt]

Try this - if you can't get it to load on E9 - make sure the slider is loaded after page loads...

for instance, $('.flexslider').flexslider();

is loaded on $(document).ready and not $(window).load...

This caused a minor headache for me until I started debugging the slider.

Hope it helps!

[LukeyJ]

Hi guys, I managed to fluke getting this working in IE 9 by editing the JQ call "$ht" in the function below. I hard coded the height to 400px; (size of my slider image) As IE9 wasn't reading the height and therefore wasn't expanding the slider to show - seems the slider was there the whole time, just hidden. Hard coding the height is not the optimal solution for everyone but without knowing how to get the Jquery script to read in the image height using the $ht vairable I thought I'd share how this worked for me.

jQuery(document).ready(function($) { function onAfter(curr, next, opts, fwd) { var $ht = $(this).height();

      //set the container's height to that of the current slide
      $(this).parent().animate({height: 400px;});
    }

[Lwest1]

Hi guys, I was having the same problem in IE9 as above with

animation: "slide"

not working but

animation: "fade"

would. Turns out I had

margin: 0!important

set globally to li in my stylesheets. This was overriding the margin setting i had on .flexslider .slide. Once I fixed that everything worked beautifully. Hope this helps someone else.

[jSanchoDev]

Fixed it by setting fixed width for div containing slider in CSS.

[matheusmelo]

For me fixed by change line 25 in css file, include margin: 0!important;

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; margin:0!important;} /* Hide the slides before the JS is

Thanks Lwest1

[illarionvk]

I've solved the issue with Flexslider not loading in IE9 by fixing the problem with window.console object.

As Ryan describes on StackOverflow, IE9 doesn't instantiate window.console object on cold start, unless you open developer tools or a new tab. So any code that contains console.log statements will silently fail.

I've inserted a script for creating dummy console object into HTML head and Flexslider started working:

if (!window.console) {
    console = {};
    console.log = function(){};
}

[eroedig]

Had the same problem, fixed itself after I loaded in modernizr. Hope this helps! http://modernizr.com/