Multipule Conflicts with jquery..... help

:frowning: staring at the computer, in forums for weeks asking questions with little or no understanding has brought me to the conclusion that i suck… and probably should of gone to school this far in the coding game. :sick: im having problems with my libraries and noticing that jquery and mootools are confilicting but theres more!!! the jQuery.noConflict(); and window.addEvent(‘domready’,function() { arent helping really but more than likely its my misinterpretation of the idea. Was wondering if any one could help me with it i know i should probably use just one library but thats beyond me how to go about converging the scripts. help? I try to keep my coding as organized as possible sorry if its not perfect. I included a large snip-it case that sidebar.js is a conflict as well down at the bottom.

===================================================

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/date.js" type="text/javascript"></script>
<script src="js/tabs.js" type="text/javascript"></script>
<script src="js/loopedslider.js" type="text/javascript"></script>
<script src="js/ColaborateLight_400.font.js" type="text/javascript"></script>
<script src="js/Colaborate-Thin_400.font.js" type="text/javascript"></script>
<script language="JavaScript" src="javascripts.js"></script>
<script language="JavaScript" src="scroller/scroll.js"></script>
<script type="text/javascript">
jQuery.noConflict();
	$(document).ready(function(){
		$(function(){
			$('#loopedSlider').loopedSlider();
		});
  	});
	(jQuery);

</script>
<style type="text/css">
.style6 {font-family: Geneva, Arial, Helvetica, sans-serif}
</style>
<script>

function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>
<script>
function PopupCenter1(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>	
 	<script type="text/javascript" src="sources/gallerybox/js/mootools-1.2.3-core-yc.js"></script>
 	<script type="text/javascript" src="sources/gallerybox/js/mootools-1.2.3.1-assets.js"></script>
    <script type="text/javascript" src="sources/gallerybox/js/milkbox.js"></script>
     <script type="text/javascript">
	 window.addEvent('domready',function() {
	  $$(
	  <style type="text/css">
		@import url(sources/gallerybox/css/milkbox/milkbox.css);/* Milkbox css */
	   </style>)
	   });
</script>    
<style type="text/css">
<!--
.style6 {font-family: Geneva, Arial, Helvetica, sans-serif}
.style17 {font-size: 11px}
.style18 {color: #3300FF}
.style19 {	font-size: 12px;
	color: #3300FF;
}
-->
</style>
</head>
<body id="page2" onload="myclock();">
<div id="main">
  <!-- HEADER -->
  <div id="header">
    <div class="row-1">
      <div class="fleft">
        <form id="ClockForm" action="">
          <fieldset>
          <input type="text" size="9" id="clock" />
          </fieldset>
        </form>
      </div>
      <div class="fright"><a href="#">User Login</a></div>
    </div>
    <div class="row-2">
      <div class="fleft"><a href="index.html"><img src="images/logo.png" alt="" width="230" height="52" /></a></div>
      <div class="fright">
        <ul>
          <a href="http://www.conectisys.com"><img src="images/conlogo.png" alt="" width="280" height="38" /></a></ul>
      </div>
    </div>
    <div class="row-3">
      <div class="nav-box">
        <ul>
          <li><a href="index.html"><em><b>Home</b></em></a></li>
          <li><a href="services.html"><em><b>Products&ensp;&&ensp;Services</b></em></a></li>
          <li><a href="meterdata.html"><em><b>Meter&ensp;Data</b></em></a></li>
          <li></li>
          <li><a href="development.html"><em><b>Development</b></em></a></li>
          <li><a href="contact.html"><em><b>Contacts</b></em></a></li>
          <li><a href="help.html"><em><b>Help&ensp;Tutorials</b></em></a></li>
        </ul>
      </div>
      <form action="sources/searchindex/search.php" method="get" id="search-form">
        <fieldset>
        
        <div><span><a href="#" onclick="document.getElementById('search-form').submit()"><img src="images/button1.gif" alt="" /></a><b>
          <input type="text" name="zoom_query" />
          </b></span></div>
        </fieldset>
      </form>
    </div>
  </div>
  <!-- CONTENT -->
  <div id="content">
    <div class="wrapper">
      <div class="col-1">
        <div id="loopedSlider">
          <div class="container">
            <div class="slides">
              <div><img src="images/image-04.jpg" alt="" /><span>Let us provide the tools you need for success</span></div>
              <div><img src="images/image-01.jpg" alt="" /><span>Cutting-edge technology; real-time data networks</span></div>
              <div><img src="images/image-02.jpg" alt="" /><span>Changing the world of energy every 15 minutes 24 hours a day</span></div>
              <div><img src="images/image-04.jpg" alt="" /><span>Advanced user-friendly software technologies</span></div>
            </div>
          </div>
          <ul class="pagination">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
          </ul>
        </div>
        <div class="img-box1 indent1"><img src="images/hnetbase.jpg" alt="" width="150" height="164" />Our products and services provide a straight forward solution to real-time energy management. The H-Net MeterSystem was designed for residential and commercial applications providing fully integrated hardware and software for the success of real time energy data management at an affordable cost. The H-Net MeterSystem begins at the Meter embedded under glass in a Landis + Gyr Gen 2 or digital meter of choice. Our two way communications private RF networks provide real time consumption records every 15 minutes 24/7. Meters in the field create a radio communications network capable of ¼ mile point to point communication. Each point acts as a repeater, each meter will find its clearest communication path to a cellular enabled BaseStation and vice versa a command can be sent back to any individual point in the network i.e connect/ disconnect.</div>
		<ul class="list1 p2">
        <li><a href="products_services/marketing/2009/Product_Specifications/2009_Specifications.pdf">BaseStation and MeterSystem Data Sheet</a></li>
        </ul>
        <h3>Products</h3>
        
        <div class="wrapper">
          <div class="col-1">
            <h5><span class="title">H-Net<span class="style6"><font size="4">&trade;</font></span></span> Metering System</h5>
            
            <div class="img-box1 indent1"><img src="images/prodimgs/Handprod.jpg" alt="" width="175" height="129" />Our company offers a virtually unlimited list of capabilities   because of our vast corporate networking. Within our alliance are companies of   all sizes. When it comes to our business, we offer our customers a powerful   resource and a recipe for success. Listed below is a comprehensive list of   services we offer our clients. Please <a href="contact.html">contact us for more   info.</a></div>
            <ul class="list1 p2">
              <p><strong>Product Images</strong></p>
              <div id="box">
                <li><a href="images/prodimgs/H-Net MeterSystem.JPG" class="img-left" border="0" rel="milkbox[gall1]" title="H-Net™ Meter System">H-Net&trade; MeterSystem</a></li></div>
              <div id="box">
                <li><a href="images/prodimgs/Network Operation.JPG" class="img-left" border="0" rel="milkbox[gall1]" title="H-Net™ Meter System">H-Net&trade; Network Operation</a></li></div>
              <div id="box">
                <li><a href="images/prodimgs/Monitor_org.png" class="img-left" border="0" rel="milkbox[gall1]" title="Smart Plug System Monitor">Smart Plug System Monitor</a></li></div>
              <div id="box">
                <li><a href="images/prodimgs/USA_SPFT_org.png" class="img-left" border="0" rel="milkbox[gall1]" title="Smart Plug">Smart Plug</a></li></div>
              <strong>Product Brochures</strong><br />
              <p>H-Net&trade; Meter System Brochure</p>
              <ul>
                <div id="box"> </div>
              </ul>
              <ul>
                <div id="box"> </div>
              </ul>
              <ul>
                <div id="box">
                  <li><a href="products_services/marketing/2009/Product_Brochure/HNet_FT.jpg" class="img-left" border="0" rel="milkbox[gall1]" title="H-Net™ Meter System Brochure">Front of Meter System Brochure</a></li>
                </div>
                <div id="box">
                  <li><a href="products_services/marketing/2009/Product_Brochure/HNet_BK.jpg" class="img-left" border="0" rel="milkbox[gall1]" title="H-Net™ Meter System Brochure">Back of Meter System Brochure</a></li>
                </div>
                <p>Smart Plug Brochure</p>
              </ul>
              <ul>
                <div id="box"> </div>
              </ul>
              <ul>
                <div id="box">
                  <li><a href="products_services/marketing/2009/Product_Brochure/SmartPlug_FT.jpg" class="img-left" border="0" rel="milkbox[gall1]" title="Smart Plug Brochure">Front of Smart Plug Brochure</a></li>
                </div>
                <div id="box">
                  <li><a href="products_services/marketing/2009/Product_Brochure/SmartPlug_BK.jpg" class="img-left" border="0" rel="milkbox[gall1]" title="Smart Plug Brochure">Back of Smart Plug Brochure</a></li></div>
               <p><strong>Installation</strong></p>
              </ul>
              <ul>
              <div id="box"> </div>
              </ul>
              <ul>
               <div id="box">
                  <li><a href="products_services/marketing/2009/Product_Specifications/2009_Netwrork Installation.pdf" class="img-left" border="0" rel="milkbox[gall1]" title="Network Installation">Network Installation</a></li></div>
            </ul>
            </ul>
           
            
          </div>
          <div class="col-1">
            <h5><span class="title">Smart Plug</span></h5>
            <ul class="list2">
              <strong>*Click the image below and use the buttons on the monitor to navigate.</strong><br />
              <br />
              <div class="img-box1 indent1">
              <a href="javascript:void(0);" onclick="PopupCenter('http://www.unitedtelemetry.com/flash/MonitorDEMO/MonitorDEMO.htm', 'myPop1',600,488);"><img alt="Smart Plug" src="images/prodimgs/Monitor_tb.png" width="150" height="122" /></a> The SmartPlug will be available for retail sales. Our self installed plug and play units will convert a common home to a Smart home over night. With the SmartPlug installed in your home energy consumers can be proactive in conserving energy and cost by scheduling power usage with the touch of a button made possible by our versatile and affordable Smart home system.Our easy to use programmable digital 8&quot; LCD color monitor can be mounted for accessibility and convenience anywhere in the home.</div>
              
         <strong>*Click the image below and use the buttons to the left and right of the images to navigate.</strong><br /><br />
              
              <div class="img-box1 indent1">
              <a href="javascript:void(0);" onclick="PopupCenter1('http://www.unitedtelemetry.com/flash/Plugs.swf', 'myPop1',650,500);"><img alt="Smart Plug" src="images/prodimgs/USA_SPFT_tb.png" width="150" height="137" /></a> With the SmartPlug system consumers can monitor power consuption, schedule power on, off and check running cost at anytime.  The SmartPlug system also features consuption comparable charts daily, monthly and yearly. Self install the SmartPlug throughout the home at locations such as the heater, air conditioner, pool equipment, kitchen appliances and lamps...</div>
              <h5><span class="title">H-Net&trade;Wireless Networks</span></h5>
              <div id="box">
              <a href="products_services/marketing/2009/Product_Specifications/Network Installation BK.jpg" rel="milkbox[gall1]"><img src="products_services/marketing/2009/Product_Specifications/Network.jpg" alt="" width="345" height="349" /></a></div>
            </ul>
</div>
        </div>
        
        <h3>Services</h3>
        <div class="img-box1 indent1"><img src="images/focus meter.jpg" alt="" width="162" height="146" />
          
          ConectiSys Corporation is pleased to offer completely open interfacing to accommodate customer needs.<br /><br />
          What does this mean exactly? It means that the possibilities of system integration are boundless. You tell us how you would like to work together and we will structure around your needs. ConectiSys Corporations core product HNet™ was designed with a few simple goals in mind; provide the highest quality technology for the AMR/AMI market, restrict limitations and accommodate to the needs of the customer, all while providing the most cost efficient turn-key solution possible.<br /><br />
          <h6>Information About  Services</h6><br />
          We offer integration at the level of your requirements. Depending on your system, we will provide standard interfaces to meet your needs, or offer custom integration into your back office system.<br /><br />
          <h6>Integration Options</h6>
<p>&nbsp;&bull; Web services for data exchange based on standards or based on your needs</p>
<p>&nbsp;&bull; Import/export functionality in various formats (CSV, XML)</p>
          <h6>Hardware Options</h6><br />
        To meet your specific needs, the hardware can be extended to be battery backed-up, provide different connectivity options or extensions to provide unique services for your company. Please <a href="mailto:conectisys@conectisys.com">contact us</a> for more information.<br /><br />
          <h6>BackOffice Options</h6><br />
          We offer a high availability of sophisticated and inexpensive services. You can choose and customize different service aspects based on your policies and needs. Some of these options are:<br /><br />
          <p>&nbsp;&bull; BackOffice web server farm</p>
          <p>&nbsp;&bull; Multiple Web Service Endpoints</p>
          <p>&nbsp;&bull; Database Replication</p>
          <p>&nbsp;&bull; Standby-Servers</p>
          <p>&nbsp;&bull; Separate analytics and statistics databases</p>
          The ConectiSys Network Operation Center (NOC) provides high physical security, battery backup and redundant, high-speed internet connectivity.<br />
          <br>With ConectiSys Corporation on your side you will have a partner, an expert team of support ready to take action 24/7. Find out more about our services <a href="mailto:conectisys@conectisys.com">contact us</a> today or call. 661.750.4621 x204</br><br />
</div>
     </div>
       <div class="col-2">
        <div class="col-2">
        <div class="wrapper">
          <div class="title">
            <ul class="tabs">
              <li><a href="#tab1"><span>News</span></a></li>
              <li><a href="#tab2"><span>Links</span></a></li>
            </ul>
          </div>
          <div class="tab_container">
            <div id="tab1" class="tab_content">
              <div class="box">
                <div class="border-top">
                  <div class="border-right">
                    <div class="border-bot">
                      <div class="border-left">
                        <div class="left-top-corner">
                          <div class="right-top-corner">
                            <div class="right-bot-corner">
                              <div class="left-bot-corner">
                                <div class="inner">
                                <script language="JavaScript" src="sidebar.js"></script>
								<div class="link"><a href="http://www.conectisys.com/news_reports.html">News Archive</a></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="tab2" class="tab_content">
              <div class="box">
                <div class="border-top">
                  <div class="border-right">
                    <div class="border-bot">
                      <div class="border-left">
                        <div class="left-top-corner">
                          <div class="right-top-corner">
                            <div class="right-bot-corner">
                              <div class="left-bot-corner">
                                <div class="inner">
                                  <ul class="list1">
                                    <li><strong>Latest Monthly Report</strong><span><a href="http://www.conectisys.com/news_reports/monthly_reports/2010/Volume_11/MR_112410.pdf" target="_blank">MR Information</a></span></li>
                                    <li><strong class="list1">Press Releases </strong><span><a href="http://www.conectisys.com/news_reports/press_releases/2010/061610_PR.pdf" target="_blank">PR Information</a></span></li>
                                    <li><strong>Recent Articles</strong><span><a href="http://www.conectisys.com/news_reports.html" target="_blank">AR Information</a></span></li>
                                  </ul>
                                  <a href="http://www.conectisys.com/news_reports.html" class="link">More Articles &amp; Reports</a></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="indent"></div>
      </div>
        <div class="indent">
        <h4>Free Product Demonstration</h4>
          <ul class="list2">
                  <li><a href="products_services/marketing/2008/Demonstration Proposal.pdf">Ask about our &quot;Free Product Demonstration&quot; offer.</a></li></ul>
          <h4>Services List</h4>
          <ul class="list2">
            <li><a href="services.html">Explore more about how to customize your <span class="just">H-Net&trade;</span> network services for your operation.</a></li>
            <li><a href="services.html">See how easy it is to work with our backend fully customizable user-friendly software.

</a></li>
          </ul>
          <a href="services.html" class="link">More Services</a> </div>
      </div>
    </div>
  </div>
  <!-- FOOTER -->

==========================================================

Hope some one can help cause im friggin stummped

Let’s start with the jQuery code. When you use noConflict, it removes $ from being used by jQuery so that it’s freed up to be used by other conflicting libraries.

Once you’ve removed the conflict with noConflict, you’re then left with jQuery, but you can provide $ back to your jQuery code by adding it to the function wrapper that’s around your code.

For those code sample, I’ll use info from the documentation pages for jQuery.noConflict() and from [url=“http://api.jquery.com/jQuery/#jQuery3”]jQuery(callback)


jQuery.noConflict();
jQuery(function ($) {
    $('#loopedSlider').loopedSlider();
});

wow… thats it… your the man ty now i have one more conflict still on that page and im not sure if its with my tab.js or sidebar.js but its over on the right side there are 2 tabs and the conflict is putting the second tab under the first and not hiding it like it does on my other pages where im not using mootools. probably a simple fix but once again need yer help?

It would greatly help if you can put a test page up on the internet.

Thanks for the link.

When I load the test page there is a javascript error, that’s most likely the cause of your problem.

tabs.js:4 Uncaught TypeError: Cannot call method ‘hide’ of null

That’s this line here:


$(".tab_content").hide();

Remember how the noConflict() removed the jQuery $ from the browser, so that it ends up being used by the other library?
The problem is not that “.tab_content” doesn’t exist, the problem is instead that $ is not a jQuery object, it belongs to the other library which doesn’t understand jQuery selectors.

Your tabs code needs to use a similar solution to the code in my previous post.

Instead of:


$(document).ready(function() {
    ...
});

Replace it with:


jQuery(function ($) {
    ...
});

Edit:

$ replaced with jQuery in the final bit of code

im sorry please forgive my inexperience but im not sure where to apply that im also seeing that my date.js, cufon.js and tab.js and other JS functions are not working correctly? at this point. i understood what to do with the loopedslider.js fuction cause it was sticking out to me but the rest im not sure what to do with?

Okay, let’s break this down.

When you run the tabs code, $ belongs to jQuery and not mooTools
The document ready wrapper around the tabs code says to run that enclosed code later on, when the page has loaded.

When you use noConflict() - at that very point in time, the $ variable is no longer globally available as a jQuery object. It instead belongs to in your case to MooTools.
Later on when the document ready code is run, it tries to use $ for jQuery code, but $ is now the MooTools one instead.

Here is the code that you currently use, which is causing problems.


$(document).ready(function () {
    ...
});

You can fix that code just by placing a $ symbol in to the function parameter, and you can also change the initial $ to jQuery, so that it doesn’t matter if the script is before or after the noConflict piece of code.


jQuery(document).ready(function ($) {
    ...
});

Making that change ensures that the code will work on the page that uses noConflict, and more importantly, it doesn’t impact how the code works on your other pages either.

But jQuery has already updated things and simplified them, so that you can now use this code instead:


jQuery(function ($) {
    ...
});

So if you’re going to update your site-wide functions, you might as well apply the simplified update that jQuery now provides.

ok got it. i was looking in the wrong place so i put the code in.:rolleyes: i updated to the most recent jquery(sitewide) and i got it fixed now i just have to figure out how to fix the date line thats out of wack at the top thank you. you’ve been a huge help.

Look at this code:


<style type="text/css">
@import url(sources/gallerybox/css/milkbox/milkbox.css);/* Milkbox css */
</style>)

Do you see your rogue ) ?

ya i suspected there was something wrong with that but i dont know what is it the @ or is it the whole perameter?

ok right in front of my face and i missed it thank you for you help finally got the whole thing working thank you for the quick responses this site is great