PDA

View Full Version : defaultexpanded option in Accordion Content script doesn't work



urbini
06-10-2009, 11:44 AM
1) Script Title: Accordion Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) My problem:
just yesterday I've installed the Accordion Content script, but it happens that the "defaultexpanded" option doesn't work, it works only if the "persiststate" option is set to false. Following my ddaccordion.init code:


ddaccordion.init({
headerclass: "menuTitle", //Shared CSS class name of headers group
contentclass: "menuContent", //Shared CSS class name of contents group
revealtype: "click", //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: true, //persist state of opened contents within browser session?
toggleclass: ["closedHeader", "openHeader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/plus.gif' width='18' height='18'>", "<img src='images/minus.gif' width='18' height='18'>"], //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(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
}
})



Here is one page of my site where you can see the menus (on the right):
http://www.sba.unifi.it/CMpro-v-p-60.html

I've also tried to disable all other javascripts to check out if it depends on some interactions with one of these scripts, but nothing has changed, so why the "defaultexpanded" option doesn't work when "persiststate" is true? Can you help me?

Thanks

ddadmin
06-11-2009, 06:25 AM
When persist state is enabled, the very first time the page loads, the 1st content should be expanded by default (due to defaultexpanded set to [0]). Is this not the case?

urbini
06-11-2009, 06:37 AM
No, this doesn't happen. I've also tried to disable all other javascripts to check out if it depends on some interactions with one of these scripts, but nothing has changed. It only works when "persiststate" is set to false.
Furthermore, I've found a thread in the forum about the same problem (http://www.dynamicdrive.com/forums/showthread.php?t=33440), it was about one year ago, but it was because of the new version of jquery (1.2.6) and at the end you answered that the bug was fixed in the new version of the accordion script.

ddadmin
06-12-2009, 04:32 AM
When testing, since you have "persiststate" enabled, note that you need to close and relaunch the browser once each time you view the page in order to get an accurate result. After the initial page view, the script remembers the last expanded DIV and recalls that when you reload the page.

I just created a blank page with just the Accordion script on it, and have the following settings:


headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "mouseover", //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: [1], //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?


As expected, the first time the page loads, the 2nd DIV is expanded by default. If I reload the page, the DIV that gets expanded becomes the last one that was expanded just before I reloaded the page.

urbini
06-12-2009, 06:40 AM
I've made a further test: saving the page in my pc (win xp pro) through the browser (File > Save page as > Complete web page), then the script works as expected.
Differently, this doesn't happen both in the on line site and in the local version of it which run through EasyPHP (in both cases the version of php is 4.x), where persiststate=true seems to disturb the defaultexpanded option.
So: it's because of some configurations of apache or php?? I really can't understand!

ddadmin
06-12-2009, 07:48 AM
What happens if you create a blank page with just the original, unmodified Accordion menu (from the code you cut and paste on the script page), and upload that page to your server? Does it still misbehave?


So: it's because of some configurations of apache or php?? I really can't understand!

It shouldn't make any difference.

urbini
06-12-2009, 08:12 AM
I made the test you suggested, a new blank page works correctly, so it doesn't depend on some server's configuration. So, maybe it depends on some configuration of the CMS we use (MDPro, http://www.maxdev.it/)? But we use several javascripts and it's the first time that one script doesn't work correctly.

yoyo01
06-15-2009, 08:00 AM
When persist state is enabled, the very first time the page loads, the 1st content should be expanded by default (due to defaultexpanded set to [0]).

I need to have all levels closed when the page loads the first time - and persist state enabled. How would I achieve this?

Thanks in advance.

urbini
06-15-2009, 08:09 AM
Reading the instructions, you have to set the following:

.....
defaultexpanded: [],
persiststate: true,
.....

yoyo01
06-15-2009, 08:24 AM
Thanks, I just checked and I had it configured as [0]!

Brilliant, and many thanks for such a quick reply!

urbini
06-16-2009, 01:58 PM
No one can help me to solve the thread's problem?
Thanks

ddadmin
06-16-2009, 05:32 PM
I've hit a wall with this one. As mentioned, the defaultexpanded option works for me on a test page with or without persistence enabled. As to why it's not working on your specific page, ruling out any server side settings which should have no effect on the script, it's possible one of the other JavaScripts on your page (there's quite a few) is the culprit. You may want to try systematically disabling the other scripts to see if that makes any difference.

urbini
06-17-2009, 02:53 PM
I'm really getting crazy!! I've made some other tests, but without success. :(
For instance, to rule out some conflict with same variables in other scripts, I've tried to rename 'defaultexpanded' and 'persiststate', e.g. 'defaultexpandedContent' and 'persiststateOpened', both in the function ddaccordion.init and in the script ddaccordion.js, but nothing has changed.
Then I've disabled (again) the most of the javascripts loaded by the pages, and nothing changes; but unfortunately I couldn't disable some inline scripts loaded automatically by MDPro, maybe it depends on one of these? I've looked for the two variables defaultexpanded and persiststate in these scripts and they aren't, so can I exclude some kind of interections?
Otherwise: can you suggest me another script like Accordion.js that use css generic classes (e.g. mypets and thepet) to expand/collapse the contents instead of using numeric classes (e.g. icongroup1, icongroup2...)? In fact, that's what I'm looking for.
Thanks

ddadmin
06-18-2009, 07:32 AM
can you suggest me another script like Accordion.js that use css generic classes (e.g. mypets and thepet) to expand/collapse the contents instead of using numeric classes (e.g. icongroup1, icongroup2...)? In fact, that's what I'm looking for.

Wait, are you still talking about Accordion Menu script, or Switch Content script instead? The former uses arbitrary CSS classes, and not numeric classes unlike the later. I'm a little confused which script you're having the persistence issue with- I thought it was with Accordion Menu.

urbini
06-18-2009, 07:49 AM
Switch Content script is the one I was using before Accordion Menu script, and the persistence issue is with Accordion menu.
If we don't manage to solve this issue, I ask you another script which uses arbitrary CSS classes instead of numeric classes; the reason is that I want to use a unique html template for all the menus.
Thanks

ddadmin
06-18-2009, 11:12 PM
Is the page you're trying to get persistence to work still this one (http://www.dynamicdrive.com/forums/blog.php?b=30)? Just for ease of debugging, you may want to enable persistence while you're trying to get it to work. It's currently turned off:


ddaccordion.init({
headerclass: "menuTitle", //Shared CSS class name of headers group
contentclass: "menuContent", //Shared CSS class name of contents group
revealtype: "mouseover", //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: ["closedHeader", "openHeader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/plus.gif' width='18' height='18'>", "<img src='images/minus.gif' width='18' height='18'>"], //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(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
}
})

Not sure what else I can add at this point, though if you're looking for alternate Accordion Menu scripts, a quick Google Search (http://www.google.ca/search?hl=en&rlz=1B3GGGL_enCA314CA314&q=jquery+accordion+menu&btnG=Search&meta=) should reveal plenty.

urbini
06-19-2009, 01:04 PM
I've just turned on persistence, so you can verify what happens: e.g. go to this page http://www.sba.unifi.it/CMpro-v-p-60.html . I was keeping it disabled because it is on the production site.
I will take a look at Google search too.
Thanks

urbini
06-22-2009, 09:41 AM
Did you manage to check the script at the page http://www.sba.unifi.it/CMpro-v-p-60.html?
If you think you can't do anithing more for me, please tell me so I look (with regret :( ) for an alternative script.
Thanks

ddadmin
06-23-2009, 07:56 AM
I've just tested your page in IE8 and FF3, which actually seems to be behaving properly. That is, when the page first loads, the first "RISORSE" header is expanded by default. If I select a different header such as "INFORMAZIONI" and reloads the page, that header remains expanded due to persistence. What am I missing here?

urbini
06-23-2009, 10:23 PM
Reading your last reply I got a bit unsettle, but then I understood why you've seen everything behaving properly:
- if you go directly (since you've opened the browser) to a subpage like the one I sent you (http://www.sba.unifi.it/CMpro-v-p-60.html), you see the menus behave like they should, i.e. the first (RISORSE) expanded by default;
- differently, if you first open the home page (http://www.sba.unifi.it), when you go to another page (for instance, whichever under the menu SERVIZI) then the menu RISORSE appears closed;
- similarly, after going directly to a subpage (the menu RISORSE is open), if you go to the home page and then you come back to a subpage, the menu RISORSE is now closed.
In conclusion, it seems there is something in the home page that interferes with the accordion content script and sets as closed all the menus during the same browsing session (likely due to persistence). Have you any idea on the causes?

ddadmin
06-24-2009, 01:43 AM
On your homepage, are you actually using the Accordion Menu script? I see you've included the script references in the HEAD section of it, but I don't see an Accordion Menu. If not, remove the script entirely from the homepage and see if that changes anything.

urbini
06-24-2009, 11:37 PM
The problem is that the HEAD section is the same for all the pages, so it's not possible to differentiate it for the home page. But the question is: in order to get the accordion script working correctly in general, does the menus need to be present in all the pages of the sites? or is my case a "strange" one and it is caused by something in the home page that interferes with the accordion script?

ddadmin
06-25-2009, 12:22 AM
The menu should be present on all pages that actually displays an accordion menu, but not on those that doesn't (ie: your frontpage). Anyhow, I believe I know what's going on. Since your frontpage contains the script files and yet doesn't contain the actual menu, every time the page is loaded, the script updates the persistence setting so no headers are expanded upon leaving that page, since technically, with no Accordion menu on the page, no headers are in fact expanded. To overcome this confusion, inside the js file, try finding the line below, and add to it the code in red below:


if (config.persiststate==true && $('.'+config["headerclass"]).length>0){ //persist state?

urbini
06-25-2009, 08:46 AM
Eureka!!! With the code you sent me it works correctly!
After all, I think that thanks to this thread you can improve the script for the next release since it could be not so uncommon that a site has some pages without accordion menus.
Thanks very much for your patience

P.S. Just for a personal curiosity: what exactly means the code you added?

ddadmin
06-25-2009, 05:55 PM
Great! The new code just checks to see if there are actually any Accordion menu headers defined on the page before setting persistence, instead of assuming that just because you've called the initialization code, that there must be.

I've added the changes to the official script as well.