Adapt Learning Community: Combining Trickle & Accordion

Hi everyone,

When clicking the Trickle button to scroll to an accordion component, the scroll only takes you as far as the Accordion component in its 'collapsed' state. So when you expand one of the Accordion items the content disappears off the bottom of the window so you then have to scroll manually to read it.

Could anyone offer a suggestion on how I could:

a) include some code on the Accordion buttons that auto-scrolls the page up the correct amount for the Accordion item content to be visible (my preferred solution) or

b) include some code on the Trickle so that it scrolls far enough up to accommodate the Accordion component in its expanded state?

Thanks and regards,

Chris

a) this will depend on the screen size, if the screen is too short for the content, the user will have to scroll anyway.

https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/js/adapt-contrib-accordion.js#L87 < you want to add code here, so it runs after the animation has finished.

something which scrolls the window to the point at which the accordion content starts (+/- the height of the navigation bar)

b) if you have another trickle button after the accordion, there will never be enough white space to scroll. this is as the accordion creates space when it expands.

otherwise, adding code to trickle which specifically for the accordion would be a nono..

but it'd go here if you decided to do that: https://github.com/adaptlearning/adapt-contrib-trickle/blob/master/js/adapt-contrib-trickle.js#L103, which leads to here https://github.com/adaptlearning/adapt_framework/blob/master/src/core/js/adapt.js#L123 which allows you to use jquery.scrollTo's callback settings "onAfter" described here: https://github.com/flesler/jquery.scrollTo#settings

i hope that helps?

Show parent | Reply

Thanks so much for getting me where I needed to go Oliver.

I realised that the article-reveal component had something similar so I cribbed something from that and inserted where you advised:

this.$el.velocity("scroll", {
      delay: 400,
      duration: 1000,
      offset: this.$el.height() - $(".navigation").outerHeight()
});

Works great in FF at least!

Regards, Chris

Show parent | Reply