Slider with jQuery in WordPress is not running in IE

Navigation
2

I'm producing my site , in Chrome everything is ok as always, but in IE Slider is not running and I do not know what do.

I'm using CSS3, jQuery Easing v1.3 and jQuery 1.11.0.

I found the code that Chrome uses to run the slider, but I have not found the problem yet.

main.js: 

homepage = function(){
    $("div.homepage div.content").append("<div id='next-slide'><i></i><div>");
    slide = 0;
    $("div.homepage  div.content").click(function(){
        slide++;

        if(slide == 1){
            $("#home-content1").animate({right:"-1500"},900, "easeOutCubic");
            $("#home-content2").animate({right:"-43"},1000, "easeOutCubic");
        }
        if(slide == 2){
            $("#home-content2").animate({right:"-1500"},900, "easeOutCubic");
            $("#home-content1").animate({right:"-43"},1000, "easeOutCubic");
            slide = 0;
        }

    }).hover(function(){
        clearTimeout(homepageSlide);
    },function(){
        homepageSlide = setTimeout("homepageSlideFunction()",5000);
    });

    homepageSlide = setTimeout("homepageSlideFunction()",5000);
}

$(document).ready(function() { 

});

CSS: 

/*SLIDER PAG INICIAL*/
#home { overflow:visible; padding:0 ; float: right;}
#home .content { padding:0; height:423px; position:relative }
#home #home-text,
#home #home-text1 { position:absolute; top:0; left:0; width:350px; height:200px; cursor:pointer }
#home #home-text1 h1,
#home #home-text2 h4 { position:absolute; top:72px; left:0; width:350px; text-align:center; font:58px "ProximaNovaSemibold", Arial, Helvetica, sans-serif bold; text-transform:uppercase; text-decoration:underline; line-height:54px; z-index:2 }
#home #home-text2 h4 { top:138px; left:23px; text-align:left; width:420px }
#home #home-text p { position:absolute; top:72px; left:25px; top:315px; margin:0; width:300px; font-size:26px; text-align:center; line-height:24px; z-index:2 }
#home #home-text2 p { top:345px; left:80px; width:280px }
#home #home-text1 .bg { position:absolute; top:10px; left:35px; width:280px; height:280px; -moz-border-radius:280px; border-radius:280px; background:rgba(0, 204, 255, 0.4); z-index:1 }
#home #home-text2 { position:absolute; top:0; left:-1500px; width:650px }
#home #home-text2 .bg { position:absolute; top:66px; left:44px; width:605px; height:252px; background:url(../img/content/home-texto2-bg.png); z-index:1 }
#home #home-content { position:absolute; bottom:0; right:0 }
#home #home-content1 { position:absolute; bottom: -30px; right:-30px }
#home #home-content2 { position:absolute; bottom:0; right:-1500px }
#home #home-content3 { position:absolute; bottom:0; right:-1500px }

#next-slide{ width: 56px; height: 56px; border-radius: 56px; -moz-border-radius: 56px; position:absolute; top: 315px; left: -80px; cursor:pointer; transition: background 0.5s;
-moz-transition: background 0.5s; /* Firefox 4 */
-webkit-transition: background 0.5s; /* Safari and Chrome */
-o-transition: background 0.5s; /* Opera */ font-size: 50px; text-align: center; line-height: 56px; border: 5px solid rgba(156, 90, 183, 0.3);}
#next-slide:hover{ background-color: #9C5AB7;}
#next-slide i{ top:12px; left:12px; width:42px; height:42px; border-radius:42px; -moz-border-radius:42px; background:#2c2c2c; transition: background 0.4s;
-moz-transition: background 0.4s; /* Firefox 4 */
-webkit-transition: background 0.4s; /* Safari and Chrome */
-o-transition: background 0.4s; /* Opera */ }
#next-slide:hover i { background-position:-40px -406px }
#next-slide span{
    position:absolute;
    z-index: 1;
    left: -5px;
    color: rgba(156, 90, 183, 0.5);
    width: 66px;
    height: 66px;
    padding: 1px 0 0;
}
#next-slide span:hover{
    color: #fff;

}
/*SLIDER PAG INICIAL*/

As I filtered and left only the essentials it stopped being automatic too.

    
asked by anonymous 09.04.2014 / 05:41

1 answer

1

The standard method of firing jQuery commands in WordPress is to encapsulate everything in: 

jQuery(document).ready(function($) { // $ poderá ser usado como atalho de jQuery
    // Nosso código
});

So, in your example it would look like: 

jQuery(document).ready(function($) { 
    homepage = function(){
        $("div.homepage div.content").append("<div id='next-slide'><i></i><div>");
        slide = 0;
        $("div.homepage  div.content").click(function(){
            slide++;

            if(slide == 1){
                $("#home-content1").animate({right:"-1500"},900, "easeOutCubic");
                $("#home-content2").animate({right:"-43"},1000, "easeOutCubic");
            }
            if(slide == 2){
                $("#home-content2").animate({right:"-1500"},900, "easeOutCubic");
                $("#home-content1").animate({right:"-43"},1000, "easeOutCubic");
                slide = 0;
            }
        }).hover(function(){
            clearTimeout(homepageSlide);
        },function(){
            homepageSlide = setTimeout("homepageSlideFunction()",5000);
        });

        homepageSlide = setTimeout("homepageSlideFunction()",5000);
    }
});

Looking at the source code of your page, I see that it also has the following block that can be inserted / adapted within jQuery(document).ready() : 

<script type="text/javascript">
if(typeof(homepage) == "function"){
    homepage();
}
if(typeof(homepageRun) == "function"){
    homepageRun();
}
</script>
    
11.04.2014 / 19:42
Updater of a web application asp.net mvc How to create a query with union using NHibernate