Editing (v7+)

Help adding my first js menu on C5

Permalink May 19, 2010 at 10:19 PM

So I found this awesome navigation menu with instruction on how to put it into a regular HTML style website. I've been working on it all day, and the CSS works perfectly fine, but I can't get the .js scripts to run on my C5 website.

Here's the webpage with the example menu and scripts I am attempting to use.

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.h...

Below is the code I've added in the header I'm using. The only thing I really changed in the original code sample is the paths and filenames to my own preferences I like.

<style type="text/css">@import "<?php  echo $this->getThemePath()?>/accordion_side_menu/accordion_side_menu.css";</style>
<script type="text/javascript" src=<?=$this->getThemePath()?>http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visithttp://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

[Edit - For some reason this code ^above^ isn't displaying correctly in this forum post when I review it. There is not supposed to be any of that garbled hyperlink text between the first </style> and the next <script> tag. Every time I copy and paste the actual code, it appears differently in this post.]

Also in the header...

<script type="text/javascript">
ddaccordion.init({
   headerclass: "expandable", //Shared CSS class name of headers group that are expandable
   contentclass: "categoryitems", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
   defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initialized

Viewing 15 lines of 22 lines. View entire code block.

 
<script type="text/javascript">
 
ddaccordion.init({
   headerclass: "expandable", //Shared CSS class name of headers group that are expandable
   contentclass: "categoryitems", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
   defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initialized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})
 
</script>

On my page I added an HTML block with this page. Menu looks fine, but it doesn't collapse or open or do any of the fun javascript. It just shows a fully expanded navigation menu.

<div class="arrowlistmenu">
<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>

Viewing 15 lines of 44 lines. View entire code block.

 
<div class="arrowlistmenu">
 
<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
 
<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>
 
<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>
 
<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>
 
</div>
 
<p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
<p>
- <a href="index.php/background?expandable=0">Expand 1st header within "expandable" header group</a><br />
- <a href="index.php/background?expandable=2">Expand 3rd header within "expandable" header group</a><br />
</p>
 
<p>Helpful links: </p>
<p>
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br />
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
</p>