Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

JQuery Cookie Plugin doesnt work in SS?


Go to End


17 Posts   5362 Views

Avatar
Hello_electro

Community Member, 80 Posts

21 February 2010 at 12:05pm

The accordion does work. The problem I am having is keeping the accordion open when I go to a subsequent page.

Their version will stay open when you refresh the page, or when you go to another page and hit the back button. Seems like it is remembering the previous state. BUT, when I advance to a page (sublink) the accordion is not checking to see what the previous state was, so it just closes.

Argh!

I use Developer Tools, but have not used Firebug. I will check it out, but unfortunately, my JS knowledge is not very good!

Thanks for taking time to try and trouble shoot this.

Avatar
bummzack

Community Member, 904 Posts

21 February 2010 at 11:24pm

I suggest you use another accordion script like this one: http://jquery.bassistance.de/accordion/demo/
Then skip the jQuery cookie part entirely and use the $LinkOrSection selectors provided by SilverStripe to activate the currently active menu item.

Avatar
bummzack

Community Member, 904 Posts

22 February 2010 at 4:41am

Edited: 22/02/2010 4:52am

I just tested this with the plugin I suggested in the previous post: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

Follow these steps:
1) Download the plugin and put the (jquery.accordion.js or minified version) in your mysite/javascript directory.
2) Make sure you include jquery and the jquery accordion script
3) In the following example, I'm going to structure the menu like this:

<ul id="navigation">
<% control Menu(1) %>
	<li><a href="$Link" class="head $LinkOrSection">$Title</a>
		<% if Children %>
		<ul>
			<% control Children %>
				<li><a href="$Link" class="$LinkOrSection">$Title</a></li>
			<% end_control %>
		</ul>
		<% end_if %>
	</li>
<% end_control %>
</ul>

The important parts are highlighted in red.

4) Then it is sufficient to add the following JavaScript (I suggest you put this in a separate file and load that file after jquery and jquery accordion):

;(function($) {
	$(function(){
		$('#navigation').accordion({
			autoheight: false,
			header: '.head',
			active: '.section'
		}); 
	});
})(jQuery);

This will turn #navigation into an accordion. The header elements are marked with "head", the element that should be opened (active) has the section class (this is automatically created by SilverStripe, using $LinkOrSection).

Avatar
Hello_electro

Community Member, 80 Posts

22 February 2010 at 7:41am

Edited: 22/02/2010 7:42am

banal:

I don't know how I can thank you enough for taking time to help find a solution for me. I plan on working this out tonight and will let you know how it goes.

Really, you and the rest of this community are so helpful.

Thanks again!

Avatar
Hello_electro

Community Member, 80 Posts

22 February 2010 at 1:04pm

banal:

That worked! Thanks so much.

I made one minor adjustment to the jquery call to allow for a person to close the accordion.

;(function($) {
   $(function(){
      $('#navigation').accordion({
         autoheight: false,
         header: '.head',
         active: '.section',
		 alwaysOpen: false, 
      });
   });
})(jQuery);

I added:

alwaysOpen:false;

I also created the if/then statement so that it checked for the accordion Boolean i added to the page.php. This allows me to designate that I want the section to be an accordion. For some reason if I dont do that the other links (without sub categories) would not activate the hyperlink. it would actually just shrink the open accordion.

Here is the final code:



		<ul id="navigation">
<% control Menu(2) %>
<% if ApplyAccordian %>
   <li><a href="$Link" class="head $LinkOrSection">$MenuTitle</a>
   <% else %>
   <li><a href="$Link" >$MenuTitle</a>
   <% end_if %>
      <% if Children %>
      <ul>
         <% control Children %>
            <li><a href="$Link" class="$LinkOrSection">$MenuTitle</a></li>
         <% end_control %>
      </ul>
      <% end_if %>
   </li>
<% end_control %>
</ul>
		

i will probably make some minor tweaks, but essentially this works flawlessly. Module makers; if you are listening, I know an accordion module would be freaking amazing!

thanks again for all the help, i hope this topic helps out others with similar problems down the line.

Avatar
bummzack

Community Member, 904 Posts

22 February 2010 at 7:36pm

Great! Glad it worked.

Your links were opening/closing the accordion, because they also had the head class applied which designates them as triggers to open/close the accordion.

Here's a suggestion how you could further improve your site (maybe you already did so?):
In the CMS, use Redirector-Pages as your Accordion headers (you can still change that in the Behaviour tab). Make them redirect to their first child.

In the template code, you would then use:

<% if ClassName = RedirectorPage %> 

instead of <% if ApplyAccordian %>. That way you can save yourself the checkbox and the site will also work properly when JavaScript is disabled. That's because the RedirectorPage will redirect the user to a sub-page and not display any unwanted content, which would happen if you use regular Pages as Accordion headers.

Avatar
Hello_electro

Community Member, 80 Posts

23 February 2010 at 4:56am

hmmm. Yeah all good points. I will definitely look into these suggestions.

Are you also saying that if someone had JS turned off the accordion will fail?

My only issue with redirecting to the first child would be that they still would not get the full list of sublinks correct? Or with JS disabled, as long as they are in the the subcategory the child links will show?

I wonder if it is worth making a child page (with a special pagetype) where I turn off the "show in menus" option and make that the page the parent is redirected too. (but still make it the first child as you suggest) Then in that page create a function to show a list of all child links in the template. Does that make sense?

Avatar
bummzack

Community Member, 904 Posts

23 February 2010 at 6:03am

If somebody has JS turned off, the Accordion won't work. He will see the fully expanded Menu instead.

No, the Redirector would only redirect when somebody has JS turned off.
Take this side-structure as an example:

Category A (Redirector)
 +-- Child A1 (Page)
 +-- Child A2 (Page)
Category B (Redirector)
 +-- Child B1 (Page)
 +-- Child B2 (Page)
Link C (Page)

With JS on:
Clicking on Category A or Category B will open/close the accordion (you cannot visit the content of these pages, this is prevented by JavaScript). All other behave as links.

With JS off:
The menu will appear fully expanded. Clicking on Category A or Category B will redirect to a Child A1 or Child B1 (or whatever page you select as redirect-target). This is to prevent that Category A or Category B are shown as content, since they don't have any.
You could also create a special Page-Type that lists all its children as content and use that instead of the Redirector.