CODEWITHSUNDEEP
javascripthtmlinternet-explorerinternet-explorer-10
Jeff Gray
Jeff Gray

Reputation: 225

Flexslider works in everything but IE 10

Flexslider works in every instance but IE 10. Website is www.nybreeder.com

can someone direct to what is wrong in the coding?

Not sure if its a version error and how to correct, or if its just a hanging code line needing finishing.. my eyes are beginning to hurt.

Thanks

<!DOCTYPE html>
<html lang="en">
<head>
<title>Westchester NY Puppies for Sale </title>
<meta charset="utf-8" />
<meta name="description" content="We offer the finest selection of purebred and        designer puppies in Westchester NY." />
<meta name="publisher" href="https://plus.google.com/104126152754968851553" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.responsivemenu.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/KleinSlabserif-Light_300.font.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/jquery.equalheights-rt.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/script.js"></script>
<script>
    $(function(){
            if (($.browser.msie) && ($.browser.version < '9.0')) {
        $('.flexslider').flexslider({
            animation: "slide",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        })   } else {
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        });  } 
    })
</script>

Upvotes: 3

Views: 9156

Answers (4)

Julia
Julia

Reputation: 1321

Faced the same problem - fade animation works in ie9 but not in ie10+.

Fixed with css:

.flexslider .slides > li {-ms-transition: all 0.8s ease-out;}

Upvotes: 0

chrsc
chrsc

Reputation: 1

If anyone is trying to debug IE 11 it identifies itself as mozilla:

if ( ($.browser.mozilla) && (Math.floor($.browser.version) == 11) ) {
  $('.flexslider').flexslider({
    animation: "fade",
    ...
  });
}

Upvotes: 0

souren
souren

Reputation: 1

this is my first post in this forum....I was also facing similar problem...got the answer from the following link....

https://github.com/woothemes/FlexSlider/issues/413

Following is the summary from GitHUb...

i fix it by add this slider.container.css("transition-duration", dur); below slider.container.css("-" + slider.pfx + "-transition-duration", dur); //Line 616 and add this slider.container.css('transform',target); below slider.container.css(slider.args); //Line 622

after adding the code it could give you trouble in chrome...following is my solution to work in all browser...

//line no 609-614

               var isChrome = window.chrome;

    if(isChrome) {

    slider.container.css("-" + slider.pfx + "-transition-duration", dur);

    }else{

    slider.container.css("transition-duration", dur);

    }

//line no 619-624

     var isChrome = window.chrome;

  if(isChrome) {

  if (slider.transitions || dur === undefined) slider.container.css(slider.args);

  }else{

  if (slider.transitions || dur === undefined) slider.container.css('transform',target);

  }

Hope it may help!!!

Upvotes: 0

Tracker1
Tracker1

Reputation: 19344

It looks like the '9.0' shouldn't be in quotes, and should maybe be 10?

$(function(){
    if (($.browser.msie) && ($.browser.version < 10)) {
        $('.flexslider').flexslider({
            animation: "slide",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        });   
    } else {
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: true,
            slideshowSpeed: 7000,
            animationDuration: 600,
            prevText: "Previous",
            nextText: "Next",
            controlNav: true,
        });  
    }
});

Upvotes: 5

Related Questions