Question

Something is happening to my jquery when the slider and content tabs are loaded. How do I fix the conflicts associated between these scripts?

Here is my js code in the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script  type="text/javascript">
   var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {

    $j(".tab_content").hide();
    $j(".tab_content:first").show(); 

    $j("ul.tabs li").click(function() {
        $j("ul.tabs li").removeClass("active");
        $j(this).addClass("active");
        $j(".tab_content").hide();
        var activeTab = $j(this).attr("rel"); 
        $j("#"+activeTab).fadeIn(); 
    });
});

</script>

<script src="http://unslider.com/unslider.min.js"></script>
<script src="http://unslider.com/jquery.event.swipe.js"></script>
<script type="text/javascript">$(function() 

{ 
$('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 15000,              //  The delay between slide animations (in milliseconds)
    complete: function() {},  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: true             //  Support responsive design. May break non-responsive designs
}); 
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

If I move tab_contents script, below the unslider, then the tab_contents script does not load. Same thing with is unslider, it is just not loading because tab_contents is on top of it. I scouted Stack Exchange for answers and saw one post saying that I should add .noConflict, which I did to the tab_Contents script, but the problem persists. Any ideas?

Was it helpful?

Solution

var tabs = (function() {
    $(".tab_content").hide();
    $(".tab_content:first").show(); 

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel"); 
        $("#"+activeTab).fadeIn(); 
    });
});


var banner = (function(){ 
    $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 15000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: true             //  Support responsive design. May break non-responsive designs
    }); 
    $( '#nav li:has(ul)' ).doubleTapToGo();
}); 


$(document).ready(function(e) {
    tabs();
    banner();
});    
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top