Active and fp-auto-height snaps to top of the section instead of the bottom

[DanDvoracek]

Hi there!

Thanks again for this great plugin. However today I found an unexpected kind of behaviour.. Here I explain it a bit more.

So my issue is relatively simple. I have a few auto-height section in my page and I have some animations going on in the afterLoad() callback..

So basically, in order to avoid these animations to load in case I load the section 4(ie) first, I replace the active tag in the correct html element (section) on the afterRender() callback. Otherwise animations for section 1 would be triggered anyway.

However, and weirdly enough, the section then snaps to the top of the screen and not to the bottom of the screen...which is what I want obviously :/

So my question is, is there a way to avoid that behaviour?

I have a codepen here: http://codepen.io/DanDvoracek/pen/Yyvrza
Copy paste the code in a single html file to see what I mean as the history can't be seen on codepen...

In the demo I provide, try removing the active class on the second section and try load the #txt route. See the behaviour with and without the active tag..

Is there any way we can change it to snap at the bottom?

Thanks in advance,

[alvarotrigo]

I don't understand why should I copy and paste the content of the codepen in another page. Can you clarify that?

And... what exactly is your problem? I didn't see anything weird.
Also, I don't know what "active tags" are you talking about because you are not doing anything with them in your codepen.

[DanDvoracek]

Hey!
Thanks for the reply. I tried to make it very clear and it seems fine to me but I'll clarify a couple of points.

When I say:

"Copy paste the code in a single html file to see what I mean as the history can't be seen on codepen..."

It's because you can not add /#txt in your url and see the result. You would simply be able to scroll, not enter a specific url... Does that make sense? In order to play with the history and see it in your url, you would have to copy paste the code in an index.html you created (unless you have a trick that I don't know..) and run it locally. No big deal, you can simply copy paste what you see in the Pen..

"Also, I don't know what "active tags" are you talking about because you are not doing anything with them in your codepen."

Well, I should have said the active class:

class="section fp-auto-height active"

Well in this very simple example I am not doing much with it as I want to keep the demo simple...So basically test it with it, and without.

As for my problem, try to hit the index.html/#txt url with the active class AND without. See the difference of behaviour.

Two different things happen:

1. With the active class, it snaps the top of the section to the top of the page (nice for a full height div, less nice for an fp-auto-height..).
2. Without the active class, it scrolls to the section and remains as expected at the bottom of the page.

What I want is basically case 1 to remain at the bottom when it's fp-auto-height... Possible? Does that make more sense?

Thanks,

[DanDvoracek]

Actually I found a simple solution. And maybe it will all make sense to you this time ;)

So my solution first (maybe not optimal, but it works..):

I check the url on afterRender() and I start by removing the active class of any section that has it. Then I obviously add it to the section where I want it to be.

Something in those lines..

on afterRender():
if(location.hash === '#section-2'){
activeSection = '#section-2';
makeSectionActive(activeSection);
}

and then..:
makeSectionActive = function(activeSection) {
$('.active').removeClass('active');
$(activeSection).addClass('active');
}

I don't consider this as a bug or what, just to make clear. It was actually more of a question about the plugin. But maybe adding something like that could be useful..?

There are some effects that I am not sure man wants to be triggered in case a user hits the url of an "internal section". As for now, the plugin allows you to fire some events at different moment (onLeave(), afterLoad(),..). However, as soon as you use these methods, the first section will always be loaded or "left" and therefore the events of the first section will always be triggered (the "active" class always seems to appear on this section first..) Does that make any sense?

Basically in my case, I found that little detail that I had to work around a little, and I think it could be interesting to have something in those lines by default for the plugin. I'm happy to give a hand by the way!

[alvarotrigo]

Fixed in 2.7.7.