JavaScript and jQuery conflict with each other

Question

I have created a website with a navigation bar at the top of the page, with some rollover images as links. I use Dreamweaver, so Dreamweaver does the JS for me. But I have recently added a jQuery gallery/slideshow called Orbit (Orbit creator: zurb.com/playground/jquery_image_slider_plugin).

However, the jQuery seems to effect and conflict with the JavaScript of the rollover images, so that when the mouse rolls over, the images do not change and is not clickable. For some reason it only effects the first 3 of the 5 links. Also, the problems occur in Chrome, Firefox, and Opera, but strangely enough works perfectly fine in Internet Explorer.

I have tried to use jQuery.noConflict in various ways, but it doesn't work, the problems still occur.

The web address where this problem occurs is: http://www.eastfieldjoinery.com/gallery.html The web address to understand what the navigation bar is supposed to do is: www.eastfieldjoinery.com/

Here is the JavaScript code for the rollover images that Dreamweaver composed:

    <script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

And here is a link to the jQuery code for the Orbit slideshow: http://www.eastfieldjoinery.com/JavaScript/jquery.orbit-1.2.3.js

I would appreciate any solutions you can give me. Thanks.

Answer 1

Add z-index: 10 in the CSS for your links. It's the slideshow's div block that is taking the mouse movements. Adding z-index to the links makes them go above the 'invisible' div.

Answer 2

It seems that this is a CSS problem. If you look closely the div is actually hanging over your first 3 menu items, so the hover is working correctly, the div is just overlapping the menu items so they are not clickable.

You should try to add this just above the div class="orbit-wrapper">:

<div class="clear"></div>

and the css:

.clear {
    clear: both;
}

Also you might want to take away position:relative from the orbit-wrapper and add some padding to it.

Another option is to add a z-index to the orbit-wrapper div of 1, and giving the Menu links a z-index of 10.

More info: http://www.w3schools.com/cssref/pr_pos_z-index.asp