Hey guys, sorry to bother you with this one, I read the pages about the nonconflict script etc,...but I 've spent the whole day trying to figure out how to solve this.
Basicly I have a script made on a mootools library. I now want to add jQuery's Fancybox to the page. When I do this my mootools accoridon style menu won't work anymore. When I delete the jQuery.js file it works again. I understand its a problem with the '$' which is used in both scripts. But I really cant find the way to solve it by using the nonconflict way. I will post the code I have in my head. Only the last rules of the script are jQuery lines. All the rest is either the mootools script, and a dynamic content script I use (but this one doenst hav any conflict with either mootools as jQuery. I really hope someone can get me on my way since I am quite a beginner in javascript. Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="htr_ex2_bestanden/mootools2.js"></ script> <script type="text/javascript" src="htr_ex2_bestanden/ajax-dynamic- content.js"></script> <script type="text/javascript" src="htr_ex2_bestanden/ajax.js"></ script> <link rel="stylesheet" type="text/css" href="fancy.css" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/javascript" src="jquery.pngFix.pack.js"></script> <script type="text/javascript" src="jquery.fancybox.js"></script> <script language="javascript"> <!-- function changeColor(obj,color){ obj.style.backgroundColor = color; } function ClearForm() { document.testform.email.value= ""; } </script> <script type="text/javascript"> window.onload = function(){ //select the first button var button1 = $('button1'); //select the second button var button2 = $('button2'); //select the first content element var content1 = $('contentElement1'); //select the second content element var content2 = $('contentElement2'); //The height transition we attach to 'contentElement1' var b1Toggle = new Fx.Style('contentElement1', 'height',{duration: 500}); //The height transition we attach to 'contentElement2' var b2Toggle = new Fx.Style('contentElement2', 'height',{duration: 500}); //add an onclick event listener to button1 button1.addEvent('click', function(){ //toggle height transition (hide-show) if(content2.getStyle('height').toInt() > 0){ //hide b2Toggle.start(0); }if(content1.getStyle('height').toInt() > 0){ //hide b1Toggle.start(0); }else{ //show b1Toggle.start(c1Height); } return false; }); //add an onclick event listener to button2 button2.addEvent('click', function(){ //toggle height transition (hide-show) if(content1.getStyle('height').toInt() > 0){ //hide b1Toggle.start(0); }if(content2.getStyle('height').toInt() > 0){ //hide b2Toggle.start(0); }else{ //show b2Toggle.start(c2Height); } return false; }); //set css display:block for the contentElements content1.setStyle('display','block'); content2.setStyle('display','block'); //get the scrollSize of the contentElements var c1Height = content1.getSize().scrollSize.y; var c2Height = content2.getSize().scrollSize.y; }; </script> <script type="text/javascript"> $j(document).ready(function() { $j("p#test1 a").fancybox(); $j("p#test2 a").fancybox({ 'hideOnContentClick': true }); $j("p#test3 a").fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow': true }); }); </script>
