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();
});
Troubleshooting Jquery confrlicts
-
03-10-2022 - |
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?
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow