Jump to:

23374 Posts in 18175 Topics by 2866 members

General Questions

SilverStripe Forums » General Questions » JQuery Cookie Plugin doesnt work in SS?

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

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

Page: 1 2 3
Go to End
Author Topic: 2959 Views
  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

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

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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!

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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.

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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?

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    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.

    2959 Views
Page: 1 2 3
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.