MooTools - Open Cart/JQuery conflict

I've got a couple of MooTools scripts (a lightbox and a open/close panel script) running on the same page as the JQuery scripts for Open Cart on a Joomla site.

The MooTools scripts run great on all of the non-Open Cart pages, but they throw an exception on the e-commerce pages.

I've tried to use jQuery.noConflict() as per this article on StackOverflow, but it's not giving me any joy yet.

The see scripts and exceptions in action here.

It's a dev site; logins are available for closer inspection.

Help greatly appreciated.
Dan
DanGilmoreAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Put you script tag inside HEAD Section
<link href="/jenkins/templates/jenkins/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="http://loudandcleardesign.com.au/jenkins/components/com_chronoforms/css/frontforms.css" type="text/css" />
  <script src="/jenkins/components/com_opencart/catalog/view/javascript/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script src="/jenkins/components/com_opencart/catalog/view/javascript/common.js" type="text/javascript"></script>
  <script src="/jenkins/components/com_opencart/catalog/view/javascript/jquery/jquery.cycle.js" type="text/javascript"></script>
  <script src="/jenkins/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/jenkins/media/system/js/core.js" type="text/javascript"></script>
  <script type="text/javascript">jQuery.noConflict();</script>
  <script src="/jenkins/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="http://jenkinsconsultancy.com.au/templates/jenkins/js/fitimage.js"></script>
<script>new FitImage('http://jenkinsconsultancy.com.au/images/background2.jpg');</script><script src="http://jenkinsconsultancy.com.au/templates/jenkins/js/panel-toggle.js"></script>

Open in new window

0
 
DanGilmoreAuthor Commented:
I've moved all scripts from the bottom of the page to the top; that hasn't solved the problem.

As an aside, I thought it was good practice to put scripts at the bottom of the page to allow other page assets to load faster..?
0
 
leakim971PluritechnicianCommented:
I put noconflict between jquery scriptSS and mootools scriptSS
You put it at the end :((
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
DanGilmoreAuthor Commented:
Thanks Leakim - will try that as soon as I figure out how to move that auto-generated noConflict call. I've never been able to figure out how to re-order the scripts called by addScript/getHeadData
0
 
leakim971PluritechnicianCommented:
ok and don't it going to work after, you need to move other scripts in the body and place some of them in a $(document).ready(function() {}) block
but here we go step by step
0
 
DanGilmoreAuthor Commented:
The answer told me ~what~ to do, which is great. But after further questioning, I still have no idea ~how~ to make the necessary changes. Ended up hiring a freelancer on another site to fix the problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.