Two javascripts have conflicts with each other

Here is my html page with js.

<script src="includes/js/jquery/jquery.js" type="text/javascript"></script>
....
<div id="head-menu">
<div class="center">
<div id="menu-all">
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
		<li><a href="index.php">Home</a></li>
		...
....
<div id="gallery-slider-all">
<div id="divSliderMain53f1e0ba013da">
           <div id="thumnail_slider53f1e0ba0139d" class="responsiveSlider" style="margin-top: 2px !important;">
            <div class="limargin" > 
                 <a href="....php"><img src="....png" width="200" height="200" alt="..." title="" /></a>
            </div>
......
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
        var $n = jQuery;
        $n(document).ready(function () {
            var rand_53f1e0ba01414 = $n('#divSliderMain53f1e0ba013da').html();
            $n('#thumnail_slider53f1e0ba0139d').bxSlider({
                slideWidth: 200,
                minSlides: 3,
                maxSlides: 3,
                moveSlides: 1,
                slideMargin: 15,
                speed: 1000,
                pause: 1000,
                controls: true,
                pager: false,
                useCSS: false,
                infiniteLoop: true,
                captions: true,
                pager: true,
                easing: ''
            });
        });         
</script>

script.js is for top menu links.
in slider js above, if instead of
var $n = jQuery;
I use
var $n = jQuery.noConflict();
I get the error:
Uncaught TypeError: undefined is not a function, on script.js line 4.
but if I just use
var $n = jQuery;
Everything seems to work fine on full screen with no error, but when I resize the window to test if it is responsive, the top menu is weird. It seems the resize orientation part of script.js has problem with this slider js and there may be a conflict. please advice how to fix it? I probably have to add I am not using any other js library on this page, so I am sure the problem is only between these two js. please advice.

Here is the source of script.js for top menu links:

var ww = document.body.clientWidth;

$(document).ready(function() {
	$(".nav li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".nav").toggle();
	});
	adjustMenu();
})

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

var adjustMenu = function() {
	if (ww < 768) {
		$(".toggleMenu").css("display", "inline-block");
		if (!$(".toggleMenu").hasClass("active")) {
			$(".nav").hide();
		} else {
			$(".nav").show();
		}
		$(".nav li").unbind('mouseenter mouseleave');
		$(".nav li a.parent").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	} 
	else if (ww >= 768) {
		$(".toggleMenu").css("display", "none");
		$(".nav").show();
		$(".nav li").removeClass("hover");
		$(".nav li a").unbind('click');
		$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		 	// must be attached to li so that mouseleave is not triggered when hover over submenu
		 	$(this).toggleClass('hover');
		});
	}
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.