PDA

View Full Version : Accordion Menu script (v1.6)



bluetooter
03-20-2009, 12:43 PM
Script Title: Accordion Menu script (v1.6)

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.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).

ddadmin
03-20-2009, 04:02 PM
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:


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)
}
})

bluetooter
03-20-2009, 06:30 PM
Thanks.

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

bluetooter
03-20-2009, 06:43 PM
I copied the code exactly as you sent it and it did not work. There was no change whatsoever.

ddadmin
03-20-2009, 10:12 PM
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.

bluetooter
03-20-2009, 10:40 PM
This is a test page which adds that script code.

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

ddadmin
03-20-2009, 11:21 PM
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:


defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content

Wait 3 secs to see it auto collapse.

bluetooter
03-20-2009, 11:39 PM
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.

ddadmin
03-21-2009, 08:29 AM
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:


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.

bluetooter
03-21-2009, 12:04 PM
Yes, thats it. Thank you