How to use Mootools in Dreamweaver CS3

niceoneishere
niceoneishere used Ask the Experts™
on
Hi Experts,
i am trying to use this bySlideMenu script i download from this site.

http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu

i know i have to use Mootools for this script to work
i have dowload the Mootools script file and the BySlideMenu script . this is my HTML mark which i am creating using Dreamweaver CS#

but when i preview in any browser, i am not seeing the accordion effect for the menu.

i think i am making a mistake in Mootools implementation. This is the first time i am using Mootools.

can someone please help me out where am i making the mistake.

Thanks and appreciate it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><!-- InstanceBegin template="/Templates/test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../assets/css/style.css" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<script language="javascript" src="../assets/js/mootools.js" type="text/javascript" ></script>
<script language="javascript" src="../assets/js/byslidemenu.js"  type="text/javascript"></script>
<!-- InstanceEndEditable -->
</head>

<body>

<div id="wrap">
	<div id="header">
    
    </div>
	<div id="top"></div>
	<div id="sidebar">
    <!-- InstanceBeginEditable name="sidebar" -->
    <script language="javascript" type="text/javascript">
	 var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
	</script>
	  <ul id="verticalmenu">
        <li>Home</li>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Directions</li>
         <li>Products</li>
     </ul>
     
   <!-- InstanceEndEditable -->
    </div>
	<div id="main" align="left">
    <!-- InstanceBeginEditable name="main" -->

    <!-- InstanceEndEditable -->
   </div>
	<div id="footer">
    <!-- InstanceBeginEditable name="footer" -->

    <!-- InstanceEndEditable -->
    </div>
</div>
</body>
<!-- InstanceEnd --></html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jason C. LevineDon't talk to me.

Commented:
There is not a "Dreamweaver" way to use MooTools.  It's just javascript include files and HTML.  So the things to check are:

1) All mootools files are uploaded to the server and the paths to those files are correct

2) Make sure the syntax of the code is correct.

You've customized the code from the demo, so you may have made a typo.  I always recommend a straight copy/paste of the demo code into a blank page just to see if it will work.  Once you know the script is not flawed, then you should customize it.

Author

Commented:
Thanks for replying and i am glad that i am atleast on right track. Now do you think there is something wrong with the way i am calling the script in the HTML. currently i am calling like below
 <script language="javascript" type="text/javascript">
         var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
        </script>
          <ul id="verticalmenu">
        <li>Home</li>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Directions</li>
         <li>Products</li>
     </ul>

Thanks

Open in new window

Don't talk to me.
Commented:
Try moving the script block into the <head></head> area of the page and reload?

Author

Commented:
tired that sir, its still not working.

here is my corrected code. i have loaded all the requried script files as mentioned in BySlideMenu script site.

Thanks

<script language="javascript" src="../assets/js/Element.Event.js" type="text/javascript" ></script>
    <script language="javascript" src="../assets/js/Element.Dimensions.js" type="text/javascript" ></script>
    <script language="javascript" src="../assets/js/Fx.Tween.js" type="text/javascript" ></script>
    <script language="javascript" src="../assets/js/Fx.Transitions.js" type="text/javascript" ></script>
<script language="javascript" src="../assets/js/byslidemenu.js"  type="text/javascript"></script>

<ul id="verticalmenu">
        <li>Home</li>
         <li>About Us</li>
         <li>Contact Us</li>
         <li>Directions</li>
         <li>Products</li>
     </ul>
     <script language="javascript" type="text/javascript">
	 var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
	</script>

Open in new window

Author

Commented:
got it working, i forgot to load the core script file duh. lol thanks a lot for your help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial