PDA

View Full Version : Accordian Menu Script



tucsonsam
03-22-2008, 08:02 AM
1) Script Title: Accordian Menu Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm


3) Describe problem: Each of the menu items appears, but all the submenus show under the submenuheaders (in other words, they do not expand and contract) and the plus.gif and minus.gif do not show.

http://www.tucsonsam.com/tepoacug/manual/tantivirus.php

Any help will be appreciated.

tucsonsam

ddadmin
03-22-2008, 09:04 AM
There's an error in your HTML that may be throwing off the script:


<li><a href=""OEaccount.php">Setting Up an Outlook Express Account</a></li>
<li><a href="editOEaccount.php">Editing an E-Mail Account in Outlook Express</a></li>
<li><a href="sendreceiveOE.php">Sending and Receiving E-Mail in Outlook Express</a></li>
<li><a href="replyforward.php">Replying to and Forwarding E-Mail</a></li>
<li><a href="sendAOL.php">Using AOL 8.0 - Sending an E-mail</a></li>
<li><a href="attachAOL.php">Using AOL 8.0 - Attaching a Photo</a></li>

<li><a href=""receiveAOL.php">Using AOL 8.0 - Receiving E-mail</a></li>

Notice the two double quotes in red, which you should fix.

tucsonsam
03-22-2008, 03:48 PM
Thank you, I should have caught that. Unfortunately, correcting it did not correct my problem. I'm continuing to try to figure out what is wrong, and hope someone can spot it for me. I'm tearing my hair out!

tucsonsam
03-23-2008, 09:02 PM
I have found the problem, but still have a question.

I fixed most of the problem by editing ddaccordian.init()

I have a question about this line in that part of the script:


toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

I'm not sure which classes to use (the example uses ["","openpet"], but I can't seem to relate that to any classes I've declared in my script.

Right now I have the plus and minus icons on the first submenu under each menuheader and some of the menuheaders open and close correctly and some don't. Each time I make a change to toggleclass, it changes how they open and close, but I don't have the right combination yet.

Help?

ddadmin
03-23-2008, 11:59 PM
The toggleclass parameter merely dynamically adds two CSS classes to the menu headers depending on whether that header is open, or closed, respectively. You have to define these two CSS classes within the stylesheet of your page as well in order for any visible effect to appear, so for example:


<style type="text/css">

.happy{
color: red
}

.sad{
color: blue
}

</style>
"
"
toggleclass: ["happy", "sad"]

The "plus" or "minus" signs you talk of can be defined either via CSS classes above (using background images), but most likely I reckon in your case, you're using another parameter, togglehtml: ["prefix", "", ""], to specify them, so that would the two two separate issues.

tucsonsam
03-24-2008, 04:12 AM
Yes, I am using togglehtml to specify the plus and minus signs. However, instead of showing up on the submenuheader, they are showing up on the first submenu after each submenuheader.

Other than that, everything else seems to work ok.

Any ideas?

ddadmin
03-24-2008, 04:40 AM
What's the URL to the problem page? Here (http://www.tucsonsam.com/tepoacug/manual/tantivirus.php)the plus/minus icons look right.

tucsonsam
03-24-2008, 05:06 AM
Aha - what browser are you using - let me guess - Firefox?

Earlier I was testing it on three browsers, but they always showed the same thing, so I got away from it. In Slimbrowser and IE7, they look the way I described them. In Firefox, they look good.

Is there any fix for this? BTW, in Slimbrowser and IE the example on the DynamicDrive pages works as it should.

Thanks for sticking with me on this!

ddadmin
03-25-2008, 04:59 AM
Yes I was. :) Anyhow, looking at your page in IE, I see the problem is since your page doesn't contain a valid doctype. Remove what's on there right now, and replace it with:


<!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" lang="en" xml:lang="en">

tucsonsam
03-31-2008, 12:51 AM
Didn't realize I had gotten another reply to this. I'm still working on it and thought I'd check anyhow.

Unfortunately, your fix doesn't seem to make any difference. I'm still wondering if my problem has something to do with the ddaccordian.js options, but nothing I change fixes the problem either.

Here's how it looks at the present time:



<script type="text/javascript">


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
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: false, //persist state of opened contents within browser session? CHANGED from true
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //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>

ddadmin
05-15-2008, 07:39 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Please be more specific in what you mean by script "not working as it should in IE". And which of tuscansam's code are you referring to? :)