March 9, 2014 at 12:51 pm #165195
Hi! I’m trying to write something that will take the user down or up to the next (or previous) div on a page. I can figure it out for a single move but unfortunately I don’t have the knowledge to write something that would work across multiple divs.
IF any one has a solution I would LOVE to hear it!
In addition if anyone knew how to make this also work with the up and down keys my mind would be blown.
Niplo.March 10, 2014 at 1:23 am #165236
Check out this pen: http://codepen.io/chromawoods/pen/CKxkg
The idea is to have a generic class (in my example “section”). And then in the JS, we animate to whatever index in that selection that comes next/previous.
The gotoSection function takes that index integer and animates to it. This means that we could send whatever index we want. For example, maybe at the bottom of the page you want to animate back to the beginning again.
Also added a handler for up/down arrows. I don’t have time to walk you through the whole demo now, but please feel free to shout is there is anything in that example that you don’t understand and I will do my best to explain. Good luck.March 10, 2014 at 7:54 am #165278
Thanks for the response, really great. Works perfectly! I had found this also which was a similar solution:
Something I hadn’t allowed for was if the user did scroll manually it looses its place with the .selected div. Do you know of a way that would also apply the .selected class if the user scrolls manually? (I appreciate this may over complicate things)
You must be logged in to reply to this topic.