Results 1 to 10 of 10

Thread: Accordion Menu script (v1.6)

  1. #1
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion Menu script (v1.6)

    Script Title: Accordion Menu script (v1.6)

    http://www.dynamicdrive.com/dynamici...ordionmenu.htm

    We are using the Accordian Menu script and it is working fine, however, we would like to know if there is a way to have a header contract automatically after a specified period of time in seconds rather than remaining in a static open state until a user clicks and/or both - (click or time out).

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

    Default

    Yes and no. What's easy to do is have all the headers contract automatically after x seconds, unless the person explicitly clicks on a header before that time frame has elapsed. When that happens, the timer is cleared. The limitation here is that the timer applies to the contraction of all headers within your group, and how the cancellation of the timer also affects all headers.

    With that said, the code in red below does this:

    Code:
    ddaccordion.init({
    	headerclass: "submenuheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	revealtype: "click", //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: [], //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: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["suffix", "<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: "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
    		this.closetimer=setTimeout(function(){ddaccordion.collapseall('submenuheader')}, 3000) //close all headers after 3 secs
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		if (isuseractivated)
    			clearTimeout(this.closetimer)
    	}
    })
    DD Admin

  3. #3
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks.

    We are only allowing one header to be active at any time so a time out function will work just fine.

  4. #4
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I copied the code exactly as you sent it and it did not work. There was no change whatsoever.

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

    Default

    I've tested it and it works actually. Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  6. #6
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is a test page which adds that script code.

    http://www.sewartrageous.com/homepagever3t2.htm

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

    Default

    Looking at your page, the code does work. However, the problem is the way your menu is set up. Since all the sub menus are collapsed by default, the user has to manually click a header to expand a sub menu. By clicking on the header, that cancels the timer used to auto collapse all headers.

    You can see the code working by enabling one of the headers to be open by default, ie:

    Code:
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    Wait 3 secs to see it auto collapse.
    DD Admin

  8. #8
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, I changed the code to allow one category to open by default, but as soon as you click on anything else, the timeout function no longer works.

    Isn't there a way to constantly refresh the timeout timer regardless of whether a header is expanded initially or not? Or does it only work one time?

    We really do not want to have a header expanded by default on opening a page. Since we are using the script to control product offerings, we want it to close by default in lets say 10 seconds, so that other menu items are availalble for selection.

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

    Default

    Yes, I changed the code to allow one category to open by default, but as soon as you click on anything else, the timeout function no longer works.
    Maybe I`m not understanding the request correctly, but I thought that was what you wanted- the timer to be cancelled as soon as the user clicks on a header. Per what you said earlier:

    we would like to know if there is a way to have a header contract automatically after a specified period of time in seconds rather than remaining in a static open state until a user clicks and/or both - (click or time out).
    To your last request:
    Isn't there a way to constantly refresh the timeout timer regardless of whether a header is expanded initially or not? Or does it only work one time?
    Sure, try something like the below thing:

    Code:
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		this.closetimer=setInterval(function(){ddaccordion.collapseall('submenuheader')}, 3000) //close all headers after 3 secs
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    
    	}
    Perhaps it would help if you reworded what you`re trying to accomplish here.
    DD Admin

  10. #10
    Join Date
    Mar 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, thats it. Thank you

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
  •