Response title
This is preview!
Move this topic
Accordion and cookies
in Using jQuery UI
•
2 years ago
Hi. So I'm trying to set up an accordion menu on my site. I really have no knowledge of Jquery but I've managed to get myself this far so the accordion works.
However I want it to remember the last opened menu header. So as the user goes through the site the menu is seemless.
I think I understand I need to add this cookie persistance?
But I can't figure out how I'm supposed to go about it?
Sorry for this really newbie question. If anyone can help that be great :)
3
Replies(14)
Re: Accordion and cookies
2 years ago
Unfortunately, the Accordion API is not as nice as something like the tabs API where the current index is passed into the change event for easy grabbing and setting to a cookie. So you have to use some jQ magic to figure out the selected index to write to your cookie for use in the next instantiation.
Using
- jQuery 1.4.1
- jQuery UI 1.7.2
- jQuery Cookies 2.2.0
I have written a demo for you here:
It uses the same markup as the first Accordion demo on the UI site. Viewing the source of the page I made you, you'll see that on line 71 I set the "active" option for accordion() to the returned value of a read from a cookie, or 0 if the read doesn't get a value. On line 72 I have set the change event of the accordion to write to the index of the selected area to the same cookie we're reading on line 71. So every time the accordion selection changes the cookie is written, and every time we instantiate the accordian the cookie is used to choose its starting selection.
From the looks of your markup, the only thing you need to do is download the cookies library (linked above) and include it into your page,. Then, above your call to create the accordion, copy and past my line 68. Also copy lines 71-75 and paste them in as options along with your other accordion options.
Re: Accordion and cookies
2 years ago
just a side note jQuery UI 1.7.2 is not currently supported with jQuery 1.4.1 you should be using jQuery 1.3.2 with that version of jQuery UI.
Re: Accordion and cookies
2 years ago
Brilliant, that looks great. I won't be able to try it out properly until the weekend. I'll let you know how it goes. Thanks!
Re: Accordion and cookies
9 months ago
Hello,
Thank you for the demo, but, unfortunately, I still have a (strange) problem: The first title is hidden.
I don't use the same stylesheet, can this have an impact on the final result?
- <div id="sidebar1">
- <a href="#">link</a>
- <h3><a href="index.html">title1</a></h3>
- <h3>title2</h3>
- <ul>
- <li><a href="#">item1</a></li>
- <li><a href="#">item2</a></li>
- <li><a href="#">item3</a></li>
- <li>item4</li>
- </ul>
- <h3><a href="#">title3</a></h3>
- </div>
Above all, I'd like to use a sub list for each item, and I'd like to use the 'accordion' for them instead of h3.
How can I do it?
Thanks in advance.
Leave a comment on jaaulde's reply
Re: Accordion and cookies
2 years ago
ok the cookie function seems to work.
However it's giving me errors in IE6/7.
cookies.set[] received non-string value and could not serialize.
and the accordion breaks after a few clicks.
Also i'm getting a problem when you click one of the links. The accordion flickers and shows all the navigation links including the ones that are meant to be hidden. Maybe this is related to the error?
Thanks for your all your help.
Re: Accordion and cookies
2 years ago
If you're using the cookies library I linked you to, and you want to set a non-string value to a cookie, you need to have the JSON API available. The cookies plugin has a doc page about this: http://code.google.com/p/cookies/wiki/JSON
I am not sure about the other problem you're having. Let's see if it goes away after fixing the missing JSON API.
Leave a comment on jackthfc's reply
Re: Accordion and cookies
2 years ago
Aha... result! That script fixed the IE problem. :)
However I'm still getting that menu flicker problem. It's like the page is loaded momentarily before the JS accordion kicks in. Happens in IE mostly.
Any ideas? Thanks again for all you help.
Leave a comment on jackthfc's reply
Re: Accordion and cookies
2 years ago
Hi Jackthfc,
I also have the menu flicker problem. Have you already solved the problem?
I also have the menu flicker problem. Have you already solved the problem?
Leave a comment on hgltao's reply
Re: Accordion and cookies
2 years ago
No luck yet. I read elsewhere that not specifying the doc type might cause the flicker. But I've done that and it still does it.
Leave a comment on jackthfc's reply
回复: Accordion and cookies
2 years ago
I have solved the problem. First you should add #accordion{visibility:hidden;} in the css of header, then add $('accordion').css('visibility','display') before the function $( '#accordion' ).accordion( {});
It seems elimate the flicker problem. But it may be not the best method. If you have better way, can you tell me?
regards
It seems elimate the flicker problem. But it may be not the best method. If you have better way, can you tell me?
regards
Leave a comment on hgltao's reply
Re: Accordion and cookies
2 years ago
Thanks hgltao. I can't get this to work. Have you got an example of where you've used it? Also I'm guessing if people don't have JS enabled then they won't be able to navigate the site because it will be stuck stuck on hidden?
Leave a comment on jackthfc's reply
Re: Accordion and cookies
2 years ago
The following piece of code in top of your script should stop the
flickering in IE:
Greetings,
Blaabi
- <!DOCTYPE html>
Greetings,
Blaabi
Leave a comment on blaabi's reply
Re: Accordion and cookies
1 year ago
This solution does not appear to work with the current version of the Accordion plugin. Tried my best, but no luck. Too bad.
Leave a comment on vsdan57's reply
Re: Accordion and cookies
3 months ago
Hi,
I got Jaaulde's code working fine on Safari and Firefox, but for IE, the accordion just doesn't work at all. Here is the page WITH the cookie code: http://tinyurl.com/6qduml6
Here it is WITHOUT the cookie code that works on all browsers: http://tinyurl.com/75u4rh2
(just FYI-When the visitor first arrives on the page, I want all the panels to be closed.)
So, what is going on with Explorer that it fails so miserably!
Thanks so much for your time and your help!
Cheers,
Janell
Leave a comment on janell1's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jackthfc's question
{"z3220811":[14737000003053969],"z3099773":[14737000000706973,14737000000728242],"z3250609":[14737000000781502],"z3080940":[14737000000686867,14737000000688410,14737000000691143,14737000000699275,14737000000708212,14737000000742705],"z3057936":[14737000000688019,14737000000693388],"z5625526":[14737000002047418],"z2980823":[14737000000688055],"z7257131":[14737000002576195]}
Statistics
- 14 Replies
- 7098 Views
- 3 Followers
