You've got "$j" being used in the last block, but no where do you define what "$j" is
so, right after your line <script type="text/javascript" src="jquery.js"></script> tell the page what "$j" is supposed to mean: <script type="text/javascript">var $j = jQuery.noConflict();</script> All this is clearly laid out right on this Wiki page http://docs.jquery.com/Using_jQuery_with_Other_Libraries On Oct 3, 5:55 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote: > 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>
