Menu
Hello,
I am a student and am currently developing my first wordpress based website.
I currently have two conflicting javascripts on my [URL=”http://www.berryconcept.co.uk/sandbox/”]home page
The first is a banner that uses mootools and the other is the bxslider jQuery script.
[B][U]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>
[B][U]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