I've been reading this: http://www.prime31.com/Blog/mootools/mootools-12-for-the-non-programmer/ and copied the page source to a testfile on my server: http://dev.bpch.no/tidsreiser/web/testpage.php <- here the examples work just fine. Then, I try to run one of the examples in a separate file: http://dev.bpch.no/tidsreiser/web/testmenu.php <- it does not work, and I can't for the life of me understand why. I've copied the code exactly from the example in the testpage.php (view source code -> copied from the Toggle Me link down to the end of the script. My code for the testmenu.php looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js" type="text/javascript"></script> <script src="http://mootools.net/assets/scripts/mootools.more.js" type="text/javascript"></script> </head> <body> <div style="width: 600px; margin: 0 auto; text-align: center;"> <p><a href="#" id="toggler">Toggle Me</a></p> <div style="margin: 0px; overflow: hidden; position: static; height: 0px;"><div id="toggleMe" style="margin: -200px 0px 0px; width: 400px; background-color: rgb(255, 153, 0); height: 200px;"> Some content here </div></div> <pre lang="javascript">window.addEvent('domready', function() { var toggleMe = new Fx.Slide('toggleMe', { duration: 1000, transition: 'bounce:out' } ); toggleMe.hide(); $('toggler').addEvent('click', function(e) { e.stop(); toggleMe.toggle(); }); });</pre> <script type="text/javascript"> window.addEvent('domready', function() { var toggleMe = new Fx.Slide('toggleMe', {duration: 1000, transition: 'bounce:out'} ); toggleMe.hide(); $('toggler').addEvent('click', function(e) { e.stop(); toggleMe.toggle(); }); }); </script> </div> </body> </html> PHP: I've even copied the Mootools-script includes from the original file. So... I'm a bit stumped why it works in the testpage.php, and not in the other. I've not copied any CSS-files or anything, so it should work exactly the same, shouldn't it? Anyone able to shed some light on this?
<script type="text/javascript" src="mootools.svn.js"></script> ^^^ this is a 404. mate, you need to install firebug (a plugin for firefox) - www.getfirebug.com - it will allow you to easily debug/figure out any mootools or other javascript problems. in this instance, firebug tells me: which immediately tells me, mootools is not loaded. i checked the script tab and its a 404 (http://dev.bpch.no/tidsreiser/web/mootools.svn.js, clearly visible when you select it from the dropdown). to use, press f12 and enable console and so forth. also, it allows you to do things like console.log(varname); which is very handy for runtime debugging. you can console.log(object) etc - which allows you to browse all of its properties and prototypes etc. trust me, you really cant do webdev w/o firebug
My bad - I accidentally changed the file after I posted this question - I remade it now, and now everything is working as before - ie, not at all. And I'm not too sure as to why, although I suspect that there is some part of the code missing. As I stated, I copied the codesnippet from the original test-file, where they worked just fine, and also copied the mootools-js-files (or, more correctly, I added the src-links).
you do know that Fx.slide got removed in mootools 1.2 right? use: http://mootools.net/docs/core/Fx/Fx.Tween or http://mootools.net/docs/core/Fx/Fx.Morph regards,
Oh, I didn't know, actually. The webpage I listed in the first post claim to be for Mootools 1.2, so I just assumed it to be correct. If that's the case, I'll fix it, and test again