jQuery bxslider and Mootols banner conflict

**tjphop** · 09-16-2011 07:29 PM

Hello,

I am a student and am currently developing my first wordpress based website.

I currently have two conflicting javascripts on my home page (splash.php).

The first is a banner that uses mootools and the other is the bxslider jQuery script.

Banner:

Code:

<head>

<script src="http://www.berryconcept.co.uk/sandbox/wp-content/themes/ForetrackWP/js/mootools.js" language="javascript"></script>

<script>

window.addEvent('domready', function()
{	
	//set the default image
	activeImage = 'img1';
	activeLink = '1';
	
	//initialise the default image
	var initialise = $(activeImage).setStyles({display:'block',opacity: 0});	
	new Fx.Style(initialise, 'opacity', {duration: 1} ).set(1);
	$(activeLink).className = "active";
	
	//event listener
	$('banner-nav').getElements('a').addEvent('mouseenter', function(e) 
	{	
		new Event(e).stop();
		
		$(activeLink).className = "";
		this.className = "active";
		activeLink = this.id;
		
		var newImage = 'img'+this.id;
		
		transitionImage(activeImage,newImage);
	});
});

function transitionImage(oldImage,newImage)
{
	var fadeOut = function()
	{
		var div = $(oldImage).setStyles({
			opacity: 1
		});
		
		new Fx.Style(div, 'opacity', {duration: 700}).start(0);
		
		fadeIn();
		
	};
	
	var fadeIn = function()
	{
		
		var div2 = $(newImage).setStyles({
			display:'block',
			opacity: 0
		});
			
		new Fx.Style(div2, 'opacity', {duration: 700}).start(1);
		
	};
	
	if(newImage != activeImage)
	{
		fadeOut();
		activeImage = newImage;		
	}
}
	
</script>
</head>

bxslider:

Code:

<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://www.berryconcept.co.uk/sandbox/wp-content/themes/ForetrackWP/js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
  $('#slider1').bxSlider({
    auto: true,
    pager: true,
	autoHover: true
  });
});
</script>
</head>

I have been trying for days to find the problem, but I'm not very knowledgeable of javascript. Any help would really be appreciated.

Thanks,

Tom

**markle976** · 09-17-2011 08:01 AM

I don't have much experience with mootools, but it looks like the problem is that both jQuery and mootools are using the $ sign. In jQuery you the $ sign is just a shortcut to the word jQuery, so you should be able to just replace each $ with jQuery like so:

Code:

jQuery(function(){
    jQuery('#slider1').bxSlider({
        auto: true,
        pager: true,
	autoHover: true
    });
});

You can also look at the noConflict() function in jQuery.

**tjphop** · 09-17-2011 08:54 AM

Perfect. Using the no conflict function and then replacing $ with jQuery works a treat.

Thanks very much.

**markle976** · 09-17-2011 08:55 AM

Happy to help!

Thread: jQuery bxslider and Mootols banner conflict

Thread Tools

Display

jQuery bxslider and Mootols banner conflict

Thanks

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions