PDA

View Full Version : DD Accordion Menu second level not working clickgo



dugu
07-25-2012, 06:50 AM
1) Script Title: DD Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem:
Hi.
I've made up my menu starting from the second example, the one with the bullets. Here is my test page: http://www.webdesignbucuresti.com/test2/test.html
If you click on Activity, it will load Activity.html - that's great.
If you then click on Auctions, it will load Auctions.html - that's great.
Now if you click on Your Auctions, instead of loading Your Auctions page, it collapses the submenu. I have been struggling for hours with this, I can not seem to find a solution. Please help, I really like this script. You can check the code on the page.

Also, one more thing I was wondering, could it be possible to only open/collapse the menu when the user clicks on the image (plus/minus), and to click and go when the user clicks on the link?

bernie1227
07-25-2012, 09:08 AM
That isn't happening for me, on mine it's working fine

dugu
07-25-2012, 09:44 AM
well you can check the page source, I basically didn't change anything from the example.
Here is the code from auctions.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({ //top level headers initialization
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "clickgo", //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: false, //persist state of opened contents within browser session?
toggleclass: ["active1", "active2"], //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 initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

ddaccordion.init({ //2nd level headers initialization
headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable
contentclass: "subcategoryitems", //Shared CSS class name of sub contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click" 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: false, //persist state of opened contents within browser session?
toggleclass: ["active1", "active2"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //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 initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


</script>

<style type="text/css">
ul, li {
list-style:none;
}
.active1{
padding:7px 3px 4px 20px;
background: url('plus.png') 0 6px no-repeat !important;
text-align:left;
}
.active2{
padding:7px 3px 4px 20px;
background: url('minus.png') 0 6px no-repeat !important;
text-align:left;
}
</style>

<body>
<ul class="sub-nav-admin">
<li class="menuheader"><a href="dashboard.php">Dashboard</a></li>
<li class="menuheader expandable" ><a href="activity.html">Activity</a></li>
<div class="categoryitems">
<ul>
<li><a href="post_offer.php">Post offer</a></li>
<li><a href="your_offers.php">Your offers</a></li>
</ul>

<br/>

<ul>
<li><a href="post_request.php" >Post request</a></li>
<li><a href="your_requests.php" >Your requests</a></li>
</ul>

<br/>

<ul>
<li><a href="post_auction.php">Post auction</a></li>
<li class="subexpandable"><a href="auctions.html">Auctions</a>
<ul class="subcategoryitems">
<li><a href="your_auctions.html">Your auctions</a></li>
<li><a href="your_bids.php">Your bids</a></li>
</ul>
</li>
</ul>

<br/>

<ul>
<li><a href="bookmarks.php">Bookmarks</a></li>
<li><a href="reviews.php">Reviews</a></li>
</ul>
<br/>
</div>

<li class="menuheader expandable" ><a href="messages.php">Messages</a></li>
<div class="categoryitems">
<ul>
<li><a href="inbox.php" >Inbox <span style="color:#ff0000;">(42)</span></li>
<li><a href="sent.php" >Sent (7)</a></li>
<li><a href="draft.php">Draft (3)</a></li>
</ul>
<br/>
</div>
</li>

<li class="menuheader"><a href="profile_settings.php" >Profile settings</a></li>
<li class="menuheader"><a href="logout.php">Logout</a></li>
</ul>

</body>
</html>
It's really strange...

dugu
07-25-2012, 09:46 AM
All I added was clickgo :(

bernie1227
07-25-2012, 10:01 AM
2 questions, what brower are you using, and was it working with either click or hover rather than clickgo?

dugu
07-25-2012, 12:57 PM
1. You can use any browser. I tested this on 2-3 computers. Just open http://www.webdesignbucuresti.com/test2/test.html and do all the steps I described, or go directly to http://www.webdesignbucuresti.com/test2/auctions.html and try to click on "Your auctions". You an see that it's not going to your_auctions.html and instead, it's collapsing the submenu.
2. I'm not sure what you mean. I am using clickgo option, you can check page source. It's not working on level 2.

dugu
07-27-2012, 07:59 AM
After some though, I believe there is a problem (bug) with the script itself. I was wondering if the admins would include and solve this issue in the next update of the script.

shelley3
09-24-2013, 08:20 PM
I have solved this problem.

http://diogenes1.fhda.edu/kanda/testmenu2.html

PROBLEM:
Sub pages of the Men's or Women's Program (which are subpages themselves): e.g. ATHLETICS HOME > Men's Programs > Basketball > Coach's Corner
When you clicked on Coach's Corner, collapsed menue up instead of going to the intended pages.



<h3 class="menuheader expandable"><span class="smallarrow">▼</span> Men's Programs</h3>
<ul class="categoryitems">
<li class="menuheader subexpandable"> <span class="smallarrow">▼</span>Basketball
<ul class="subcategoryitems">
<li><a href="../ath/basketballm/coach.php">Coach's Corner</a></li>
<li><a href="basketballm/assistant.php">Assistant Coaches</a></li>
<li><a href="basketballm/roster.php">Players' Roster</a></li>
<li><a href="basketballm/schedule.php">Schedule &amp; Results</a></li>
<li><a href="basketballm/recruit.php">Recruiting</a></li>
<li><a href="basketballm/former.php">Former Players</a></li>
</ul>
</li> . . .

. . . <li>football, soccer, swimming, tennis . . . </ul>
</li>
</ul>
<!-- END MEN'S PROGRAMS -->


SOLUTION:
Added this line of code to the subexpandable part of the ddaccordion.init script


revealtype: "mouseover", //NECESSARY PIECE FOR SUBCATEGORIES! Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"


Here is the entire script that goes in the head of the menu html:


<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: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 100, //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: [], //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 initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

ddaccordion.init({
headerclass: "subexpandable", //Shared CSS class name of headers group that are expandable
contentclass: "subcategoryitems", //Shared CSS class name of contents group
revealtype: "mouseover", //NECESSARY PIECE FOR SUBCATEGORIES! Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
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: "normal" //speed of animation: "fast", "normal", or "slow"
})
</script>