Accordions in panel

[nathobson]

Accordions in panel

[ajlkn]

Does the panel close on click? Also, any JS errors showing up in your
browser console?

On 2/12/2014 11:59 AM, nathobson wrote:

Hey.

I've been trying to build in a way to handle multiple levels of
navigation in panels. My solution is to make parent links accordions
which then reveal the child links when clicked / tapped. However, no
matter which accordion plugin I use, they all fail. I can get them
all to work fine in the main body of a page but as soon as I copy &
paste the code into a panel, they don't work. The accordions stay
closed and do not open when clicked.

I also had an issue of links, even #, closing the panels. I tried
adding skel-panels-ignore (as suggested in another issue) to the
links which stopped the panels closing but did not help with the
accordions issue.

Any ideas?

My config is as follows:

// Init skelJS window._skel_config = { prefix:
'wp-content/themes/ckd-reset/style', preloadStyleSheets: true,
resetCSS: true, boxModel: 'border', preloadStyleSheets: true, grid: {
gutters: 40 }, breakpoints: { desktop: { range: '1020-', containers:
960 }, tablet: { range: '681-1019', containers: 640 }, mobile: {
range: '-680', containers: 300, lockViewport: true, grid: { collapse:
true, gutters: 20 } } } };

// Init skelJS panels plugin window._skel_panels_config = { panels:
{ leftPanel: { breakpoints: 'tablet,mobile', useTransform: false,
position: 'left', size: "75%", html: '

' } } };

--- Reply to this email directly or view it on GitHub:
#37

[nathobson]

Panel closes on click as normal (body or toggle) but doesn't close on click of a link that should expand an accordion. The ignore class seems to be working as it should. No obvious console errors.

Shall I upload a demo? Currently developing on a local WordPress install.

[ajlkn]

Have you tried applying the "skel-panels-ignore" class to the link(s) in
question? Might need to tweak the accordion plugin you're using to make
sure any links it generates also have that class.

On 2/12/2014 2:51 PM, nathobson wrote:

Panel closes on click as normal (body or toggle) but doesn't close on
click of a link that should expand an accordion. The ignore class
seems to be working as it should. No obvious console errors.

Shall I upload a demo? Currently developing on a local WordPress
install.

--- Reply to this email directly or view it on GitHub:
#37 (comment)

[nathobson]

Thanks for the reply. Yes, I've tried the skel-panels-ignore class which stopped the links closing the panel but didn't allow the accordions to function correctly (tried several different jQuery plugins).

[ajlkn]

And no JS errors in the browser console?

On 2/13/2014 3:55 AM, nathobson wrote:

Thanks for the reply. Yes, I've tried the skel-panels-ignore class which stopped the links closing the panel but didn't allow the accordions to function correctly (tried several different jQuery plugins).

---

Reply to this email directly or view it on GitHub:
#37 (comment)

[nathobson]

I'm at home now and the local dev environment is at work so I'd have to double check tomorrow. In fact, I'll upload a copy of the site.

[nathobson]

OK, I've uploaded a test site: http://ckdreset.ckdreview.co.uk. VERY basic set up at the moment, just for testing purposes. The only console error I see is:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 

After a quick Google, this seems to be a warning that is safely ignored and related to jQuery, not any of the scripts in question.

You'll see in the demo site that I've implemented the exact same accordion plugin on the links in the body (under the heading "Content") as in the panel menu which shows when the top-left menu button is clicked (sorry, it's a little small!) at the "mobile " and "tablet" viewport sizes. Parent 1 has a single child page, Parent 2 has a child page, which in turn also has a child page of its own. You'll also be able to see that I've added skel-panels-ignore to all the links in the panel menu using:

$('#mobile-navigation a').addClass('skel-panels-ignore');

Parent pages are set to link to "#" rather than an actual link. Also, please note that everything is only set up on the home page, so if you follow a link , everything will likely break!

I can't figure out what's going on here.

[ajlkn]

Ah, I think I know what's happening: you're using "copyHTML", which only makes a shallow copy of the target's children (so bound events, like those added by your accordion plugin, won't be copied). What you want to use is "moveHTML", which instead relocates the target's children (events and all).

[nathobson]

Ah ok, makes sense. However, just tried implementing this and you can see that it doesn't get moved. Same link as before: http://ckdreset.ckdreview.co.uk (again, sorry for the messy site, it's just a proof of concept). You can see the nav with the id #mobileNav is still there in the body and the panel is empty. My config file:

// Init skelJS 
window._skel_config = {
    prefix: 'wp-content/themes/ckd-reset/style',
    preloadStyleSheets: true,
    resetCSS: true,
    boxModel: 'border',
    preloadStyleSheets: true,
    grid: { gutters: 40 },
    breakpoints: {
        desktop: { range: '1020-', containers: 960 },
        tablet: { range: '681-1019', containers: 640 },
        mobile: { range: '-680', containers: 300, lockViewport: true, grid: { collapse: true, gutters: 20 } }
    }
};

// Init skelJS panels plugin
window._skel_panels_config = {
    panels: {
        leftPanel: {
            breakpoints: 'tablet,mobile',
            useTransform: false,
            position: 'left',
            size: "75%",
            html: '<div data-action="moveHTML" data-args="mobileNav"></div>'
        }
    }
};

[ajlkn]

You have two elements with the "mobileNav" ID, so that might be messing with things.

[nathobson]

Ah, silly error. However, renamed one to "mobileNavi" but same problem. I also tried creating a completely new div to move in case anything weird was happening with that particular section but no joy still.

[ajlkn]

I'd suggest following the way stuff is set up in this template, as it's
a pretty good demonstration of using moveElement on something with
event-bound children:

http://html5up.net/uploads/demos/prologue/

On 2/16/2014 3:26 PM, nathobson wrote:

Ah, silly error. However, renamed one to "mobileNavi" but same problem. I also tried creating a completely new div to move in case anything weird was happening with that particular section but no joy still.

---

Reply to this email directly or view it on GitHub:
#37 (comment)

[nathobson]

Ah OK, so I used moveElement rather than moveHTML as per the html5up template and it all works including the accordion functionality.

Thanks for your time and patience, great work :) skelJS is definitely going to be the base for my future projects! It's a very well structured way to handle the often headache-inducing process of creating responsive sites, once you've got your head around the setups. Also great for quick templating.

In summary, for anyone reading this who may have similar troubles getting it set up – what I did was:

1. In my config, I used moveElement (rather than copyHTML as I had previously) for the panel content to retain the events needed for the accordions to function. My panel config looked like:

html: '<div data-action="moveElement" data-args="mobileNav"></div>'

2. Assigned skel-panels-ignore class to menu links so they don't close the panel when clicked. I used:

$(document).ready(function() {
    $('#mobile-navigation a').addClass('skel-panels-ignore');
});

[ajlkn]

Awesome. Glad it worked out :)