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

Thread: Accordion Menu header link

  1. #1
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion Menu header link

    1) Script Title: Accordion Menu - urbangrey

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

    3) Describe problem: I used urban grey in our new company SharePoint Intranet and the issue is once I click on the header, say COMMUNICATIONS, it expands the menu and goes to the landing page. But then the link in the header no longer works. So if you go to any one of the submenus and want to go back to the landing page, the header link doesn't work. I had to place a link back to the COMMUNICATIONS at the bottom of every subpage to go back to the COMMUNICATIONS landing page. The action in this menu is "clickgo". Is there some javascript to add to any accordion menu to fix this? Is one of the parameters in the setting able to keep the header link active?

    Here are the settings:
    Code:
    [<script type="text/javascript">
    
    ddaccordion.init({
    headerclass: "headerbar", //Shared CSS class name of headers group
    contentclass: "submenu", //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: 800, //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: true, //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: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "normal", //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>]
    Last edited by ddadmin; 11-13-2012 at 01:01 AM.

  2. #2
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Can anyone help with this problem? I am having the same issue. That is, once a header is expanded, the link within it no longer works. In my case, I use the intial link to populate an iframe. Once a user selects a submenu item, they cannot return to the header landing page without double-clicking the header to first collapse it, then re-expand it. The code I am using is (viewable on my test site at: www.richardmfg.comli.com):

    Code:
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //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: true, //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: ["", "selected"], //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
     	myiframe=window.frames["content"] //reference and cache iframe to populate
     	var lastexpandedindex=expandedindices.pop() //get last index within array
     	myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
     	if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it
     	myiframe.location.replace(header.getAttribute('title'))
    }
    }
    })

  3. #3
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Hipower:
    The link you posted currently doesn't work (says it's under review). When it does please post a heads up and I'll check it out.
    DD Admin

  4. #4
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Yeah. Sorry about that. Their review was taking too long so I uploaded to a different free host for testing. The new link is: http://richardmfg.zzl.org/

    Thanks for taking a look!

  5. #5
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Is there anyone that might be able to help with this? Seems like I am missing something simple, but I am brand new to coding.

  6. #6
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Sorry for the delay in response. Testing out the left accordion menu on your page, everything seems to be in order for me actually. I don't see a "COMMUNICATION" header. Can you please describe in point form the exact steps to take once on your site to see the issue you're talking about?
    DD Admin

  7. #7
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    No worries, thanks for the response. The specific problem I am having is:
    -When you open the page and select a menu header (such as "PRODUCTS"), it expands normally and the iframe in the middle of the page is loaded with my landing page for "products"
    -If you select a submenu item (such as "WIRING HARNESSES") the page in the iframe changes accordingly to my "wiring harnesses" page
    -The problem occurs if you want to return to the "PRODUCTS" landing page. If you click on the menu header for "products again", it only closes the menu. It does not return the iframe to the "products" landing page.

    again, the test site is: http://richardmfg.zzl.org

    Thanks for looking!

  8. #8
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Ah ok I see what you mean now. This is actually how the menu was designed to behave- closing of a header doesn't trigger the navigating to the header's destination, as otherwise, when you expand another header, the browser would try and go to both the contracting header's link plus the expanding one's. I'll see if I can tweak the script to only go to the contracting header's link when no other headers are being expanded at the same time. Stay tuned.
    DD Admin

  9. #9
    Join Date
    Oct 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Sounds great. I appreciate it. Additionally, I have it set to contract the header if you click it again. It is my intention to turn that off once all this is resolved.

  10. #10
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Ok, firstly, inside ddaccordion.js, try adding the line in red below to the following line:

    Code:
    				var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
    				config.$lastclicked = $(this)
    With the addition added, try extending your initialization code with the code in red:
    Code:
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //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: ["", "selected"], //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
     	myiframe=window.frames["content"] //reference and cache iframe to populate
     	var lastexpandedindex=expandedindices.pop() //get last index within array
     	myiframe.location.replace(headers[lastexpandedindex].getAttribute('title')) //load page associated with expanded header
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
     	if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user clicking or moving mouse over it
     		myiframe.location.replace(header.getAttribute('title'))
    	}
    	else if (state=="none" && isuseractivated==true && this.$lastclicked.get(0) == header){
    		myiframe.location.replace(header.getAttribute('title'))
    	}
    }
    })
    This should do the trick.
    DD Admin

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

    HiPower (11-26-2012)

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
  •