javascript - Flexslider works in everything but IE 10 - Stack Overflow

IT技术

更新时间：2025-03-130

admin管理员组
文章数量:1312662

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

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="" />
<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>

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

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

Share Improve this question edited May 15, 2013 at 21:03 Tracker1 19.3k12 gold badges85 silver badges106 bronze badges asked May 15, 2013 at 20:42 Jeff Gray 2251 gold badge4 silver badges13 bronze badges

Did you check your browser's console to see if it throws any errors? – Ian Commented May 15, 2013 at 20:46
not sure what you mean, i hardly use IE 10 sorry, I use chrome dev tools, if i view the site in IE 9 works fine, its just IE10 – Jeff Gray Commented May 15, 2013 at 20:48
Yeah, IE 10 (and IE 9 and 8) should have the same thing - a feature called Developer Tools (opened by pressing F12). You should look at the "console" to see if any errors are thrown. – Ian Commented May 15, 2013 at 20:52
HTML1508: Unmatched end tag. index.html, line 103 character 6 HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document. index.html, line 225 character 39 HTML1423: Malformed start tag. Attributes should be separated by whitespace. index.html, line 319 character 72 HTML1409: Invalid attribute name character. Attribute names should not contain ("),('),(<), or (=). index.html, line 319 character 81 – Jeff Gray Commented May 15, 2013 at 20:54
those are codes thrown, nothing that would seem to effect why slider works in everything but 10 – Jeff Gray Commented May 15, 2013 at 20:54

| Show 4 more ments

4 Answers 4

Sorted by: Reset to default 5

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,
        });  
    }
});

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

https://github./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!!!

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",
    ...
  });
}

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;}

本文标签： javascriptFlexslider works in everything but IE 10Stack Overflow

版权声明：本文标题：javascript - Flexslider works in everything but IE 10 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1741878957a2402632.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Flexslider works in everything but IE 10 - Stack Overflow

4 Answers 4

更多相关文章