问题
Im using Mootools and Jquery, I tried every solution i could come accross and nothing works.
Mootools is used for the Dropdown menu and jQuery is used for the Gallery. I have used this combo before and solved it by using the noconflict rule, but this time nothing seems to work.
Live demo: Test Site
Drop down menu is on the Home and Portfolio links.
I have posted the original code. I changed jQuery back to $ so i can have fresh eyes on everything.
The issue is that the dropdown works, but it does not work they way it is suppose to, css styles that should be applied, aren't. Dropdown works perfect on all other pages where the gallery is not present.
This is the code:
<!DOCTYPE html>
<html><!-- InstanceBegin template="/Templates/renee.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta content="charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Renee Mc Magh Marketing</title>
<!-- InstanceEndEditable -->
<link href="css/reneeMcMagh.css" rel="stylesheet" type="text/css">
<link href="css/MenuMatic.css" rel="stylesheet" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// BeginOAWidget_Shared_2241022
google.load("mootools", "1.4");
// EndOAWidget_Shared_2241022
</script>
<script src="js/MenuMatic_0.68.3.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2241022: #nav */
a:link{
color: #FFFFFF;
font-weight: normal;
font-family: "Century Gothic";
font-size: 16px;
text-transform: capitalize;
}
a:visited{
color: #FFFFFF;
font-weight: normal;
font-family: inherit;
font-size: inherit;
}
/* all menu links */
#nav a, #subMenusContainer a{
text-decoration: none;
display: block;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: none;
padding-top: 7px;
padding-right: 20px;
padding-bottom: 16px;
padding-left: 20px;
background-color: transparent;
/* [disabled]border-bottom-left-radius: 5px; */
/* [disabled]border-bottom-right-radius: 5px; */
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align: left;
font-family: "century gothic";
font-size: 14px;
/* [disabled]width: 200px; */
background-color: #56D7FE;
color: #FFF;
}
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color: #321414;
color: #FFFFFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color: transparent;
color: #FFFFFF;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: none;
left: 0px;
background-color: #56D7FE;
/* [disabled]width: 210px; */
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
/* [disabled]padding-top: 7px; */
}
#subMenusContainer li:hover{
background-color: #333333;
}
/* main menu ul or ol elment */
#nav{
display: block;
list-style: none;
z-index: 5;
display: block;
position: relative;
width: 410px;
margin-top: -7px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#subMenusContainer{
display: block;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 0;
overflow: visible;
z-index: 1000000000;
background-color: #321414;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.smOW{
display: none;
position: absolute;
overflow: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
/* [disabled]background-color: #56D7FE; */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: -2px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}
#nav li ul { /* second-level lists */
position: absolute;
width: auto;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top: 2.8em;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }
/* EndOAWidget_Instance_2241022 */
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 6;
}
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2241022" binding="#nav" />
</oa:widgets>
-->
</script>
<script type="text/javascript">
// BeginOAWidget_Instance_2241022: #nav
window.addEvent('domready', function() {
var myMenu = new MenuMatic({
id:"nav",
effect: "slide",
duration: "600",
hideDelay: "1000",
matchWidthMode: "true",
orientation: "horizontal",
direction:{ x: 'right', y: 'down' },
opacity: 95
});
});
// EndOAWidget_Instance_2241022
</script>
<script>
jQuery.noConflict();
</script>
<!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script><!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<!-- InstanceEndEditable -->
</head>
<body>
<div id="marketing"><img src="images/marketingBranding.png" width="200" height="51"></div>
<div id="Header">
<div id="logo">
<table width="150" border="0" align="right" cellpadding="5" cellspacing="5">
<tr>
<td height="160"><a href="https://www.facebook.com/pages/Renee-McMagh-Marketing/172159979492476" target="new"><img src="images/facebook.png" width="150" height="150"></a></td>
<td><a href="https://twitter.com/ReneeMcMagh" target="new"><img src="images/twitter.png" width="150" height="150"></a></td>
<td><a href="http://www.linkedin.com/pub/renee-mcmagh-taylor/28/8a7/2a0" target="new"><img src="images/linkedin.png" width="150" height="150"></a></td>
</tr>
</table>
</div>
</div>
<div id="navigation">
<div id="navigation_container">
<ul id="nav">
<li><a href="index.html">Home</a>
<ul>
<li><a href="history.html">history/Highlights</a></li>
<li><a href="business.html">business ethos/Principles</a></li>
</ul></li>
<li><a href="services.html">services</a></li>
<li><a href="#">portfolio</a>
<ul>
<li><a href="logo_design.html">Logo Design</a></li>
<li><a href="stationary.html">Brand Pack</a></li>
<li><a href="branding.html">Branding/Marketing</a></li>
<li><a href="website_designs.html">Website Designs</a></li>
</ul> </li>
<li><a href="contact.html">Let's Chat</a></li>
</ul>
</div>
</div>
<div id="breadcrums">You are here: <a href="about.html">Home</a> <img src="img/arrow_right.gif" width="10" height="8"><!-- InstanceBeginEditable name="EditRegion5" -->Portfolio <img src="img/arrow_right.gif" width="10" height="8"><a href="website_designs.html">Web Design</a><!-- InstanceEndEditable --></div>
<div id="content">
<!-- InstanceBeginEditable name="EditRegion3" -->
<h1>Web Design</h1>
<h2> Be on the WORLD WIDE WEB </h2>
<p> </p>
<div>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
</li>
<li> <a class="thumb" href="gallery/websites/slides/casavalde.png" title="Casavalde"> <img src="gallery/websites/thumbs/Casavalde.jpg" alt="Casavalde" width="120" height="83" /></a> </li>
<li> <a class="thumb" href="gallery/websites/slides/cemblocks.png" title="Cemblocks"> <img src="gallery/websites/thumbs/Cemblocks.jpg" alt="Cemblocks" width="120" height="83" /></a> </li>
<li> <a class="thumb" href="gallery/websites/slides/cocoon.png" title="Cocoon"> <img src="gallery/websites/thumbs/Cocoon.JPG" alt="Cocoon" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/credit-online.png" title="Credit Online" class="thumb"> <img src="gallery/websites/thumbs/Credit Online.jpg" alt="Credit on line" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/DeWetDeVilliers.png" title="De Wet De Villiers" class="thumb"> <img src="gallery/websites/thumbs/De Wet De Villiers.jpg" alt="De Wet De Villiers" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/edgeSport.png" title="Edge Sport" class="thumb"> <img src="gallery/websites/thumbs/Edge Sport.jpg" alt="Edge Sport" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/embroidereze.png" title="Embroidereze" class="thumb"> <img src="gallery/websites/thumbs/Embroidereze.jpg" alt="Embroiderze" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/FBMining.png" title="FB Mining" class="thumb"> <img src="gallery/websites/thumbs/FB-Mining.JPG" alt="FB Mining" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/foodworx.png" title="Foodworx" class="thumb"> <img src="gallery/websites/thumbs/Foodworx.jpg" alt="Foodworx" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/GreenHabitat.png" title="Green Habitat" class="thumb"> <img src="gallery/websites/thumbs/Green Habitat.jpg" alt="Green Habitat" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/hi-parts.png" title="Hi Parts & Hydraulics" class="thumb"> <img src="gallery/websites/thumbs/Hi Parts & Hydraulics.jpg" alt="Hi Parts & Hydraulics" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/jRaath.png" title="J Raath" class="thumb"> <img src="gallery/websites/thumbs/J-Raath.jpg" alt="J Raath" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/Medi-Care.png" title="Medicare" class="thumb"> <img src="gallery/websites/thumbs/Medicare.JPG" alt="Medicare" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/paramount.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/Paramount.jpg" alt="Paramount" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/NWLitho.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/nwlitho.jpg" alt="Paramount" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/maricoMeats.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/maricomeats.JPG" alt="Paramount" width="120" height="83" /></a> </li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
<p> </p>
<!-- InstanceEndEditable --></div> <div id="footer_nav"> <div align="right" class="first" id="menu">
<ul>
<li><a href="about.html">Home</a></li>
<li><a href="services.html">services</a></li>
<li><a href="website_designs.html">portfolio</a></li>
<li><a href="contact.html">Let's Chat</a></li>
</ul>
</div></div>
<div id="footer">
<h6>Marketing with Attitude</h6>
<p> Copyright © 2013 Renee McMagh Marketing | All rights reserved</p>
</div>
<!-- InstanceBeginEditable name="footer" -->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 15,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: 'Previous Photo',
nextLinkText: 'Next Photo',
nextPageLinkText: 'Next',
prevPageLinkText: 'Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
回答1:
jQuery's library is not loaded yet when you call jQuery.noConflict(); that is why you get the first error on console, change that line of code to after jQuery's library script.
来源：https://stackoverflow.com/questions/19835780/jquery-mootools-conflict-cantt-find-solution