Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Accordian Menu Script

  1. #1
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Accordian Menu Script

    1) Script Title: Accordian Menu Script
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    There's an error in your HTML that may be throwing off the script:

    Code:
    	<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.

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    tucsonsam (03-22-2008)

  4. #3
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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.

  7. #6
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #7
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    What's the URL to the problem page? Here the plus/minus icons look right.

  9. The Following User Says Thank You to ddadmin For This Useful Post:

    tucsonsam (03-24-2008)

  10. #8
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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!

  11. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <!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">

  12. The Following User Says Thank You to ddadmin For This Useful Post:

    tucsonsam (03-31-2008)

  13. #10
    Join Date
    Mar 2008
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by tucsonsam; 03-31-2008 at 12:59 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •