Slider with jQuery on Wordpress is not running on IE

Asked

Viewed 123 times

2

I am producing my website, in Chrome everything is ok as always, but in IE Slider is not running and do not know what to do.

I am using CSS3, jQuery Easing v1.3 and jQuery 1.11.0.

I found the code that Chrome uses to run the slider, but I haven’t 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 Filtreed and was leaving only the essential it ceased to be automatic too.

jquery wordpress

  • There’s a way you can add this Js to this Wordpress site ai http://www.asual.com/jquery/address/ and see if this will work ???

  • 3

    Hello. Putting the site link and asking people to see there is not a good one here. Once you solve the problem (hopefully it does!), the question loses meaning and will no longer be useful to anyone. The best way to ask would be to isolate the problem, try to reproduce it, and post the relevant portion of the code here. A good starting point is to look at the console in the IE developer tools, it must be registering some error. I suggest editing the question to include the error and the chunk of the code that caused it.

  • What @bfavaretto said is 100% correct. The best thing to do is to explain as you built the slider, which libraries you used, how is your HTML, etc. So people who will have easier access to data to help you.

  • I edited, see if you can understand. VLW by personal tip.

1 answer

1

The standard method of shooting jQuery commands in Wordpress is to encapsulate everything in:

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

Then in your example:

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 you also have the following block that may be inserted/adapted within the jQuery(document).ready():

<script type="text/javascript">
if(typeof(homepage) == "function"){
    homepage();
}
if(typeof(homepageRun) == "function"){
    homepageRun();
}
</script>

Browser other questions tagged jquery wordpress

You are not signed in. Login or sign up in order to post.