search

pierrickrouxel / ember-strap

DEPRECATED IN FAVOR OF https://github.com/kaliber5/ember-bootstrap
MIT License
15 stars 3 forks source link

Scrollspy - Not Affixing Consistently Due to Ember Routes #4

Closed ehubbell closed 9 years ago

ehubbell commented 9 years ago

I'm having issues getting the ScrollSpy .affix method to stick consistently at the top of the page. I believe this is due to Ember and how the framework loads routes.

Basically, when I enter the Route where I have the scrollspy .affix method inserted from another route, the .affix method won't activate and stick to the top of the page. However, if I refresh the page (which loads the route fresh) then the .affix method works fine and users are able to view Scrollspy as they scroll down the page.

Any thoughts on how to get the .affix method to work consistently without loading the route fresh every time?

Here is my HTML

<div class='scrollspy-block'> <div class='scrollspy' data-spy='affix' data-offset-top='400'> <ul class='nav'> <li class='help-section'>Getting Started</li> <li class='help-subsection'><a href='#create-account'>Creating an Account</a></li> <li class='help-subsection'><a href='#find-friends'>Finding Friends</a></li> <li class='help-subsection'><a href='#details'>Your First Event</a></li> </ul> </div> </div>

Here is a link to the live page: http://myhubapp.com/help/getting-started

pierrickrouxel commented 9 years ago

I understand your problem. I will try to fix this quickly. Thanks.

ehubbell commented 9 years ago

Thanks so much! I appreciate you reaching out. Keep me posted and happy to help / answer any questions.

Cheers, Eric

On Sep 16, 2015, at 12:19 PM, Pierrick Rouxel notifications@github.com wrote:

I understand your problem. I will try to fix this quickly. Thanks.

— Reply to this email directly or view it on GitHub https://github.com/pierrickrouxel/ember-strap/issues/4#issuecomment-140829969.

pierrickrouxel commented 9 years ago

Boostrap scrollspy needs to be refreshed after the DOM change. I don't know how to observe DOM changes with Ember. I look for a workaround.

pierrickrouxel commented 9 years ago

I added a new component es-affix. It fixes the problem. Can you try it please?

Example: {{#es-affix offset="333" classNames="bs-docs-sidebar hidden-print"}} ... {{/es-affix}}

You can find it in the master: 6e6482f9ef07d8a9e1b153c3e3d32e93bce19846

pierrickrouxel commented 9 years ago

Released in v2.0.1

pierrickrouxel commented 9 years ago

Did you try?

ehubbell commented 9 years ago

Sorry for the delay! I really appreciate you working on this. I upgraded to v2.0.2 and had a couple issues however I figured it out. Your email was slightly off with regards to the offset property, however your website is correct.

EMAIL {{#es-affix topOffset="333" classNames="bs-docs-sidebar hidden-print"}}

WEBSITE {{#es-affix offset="333" classNames="bs-docs-sidebar hidden-print"}}

Here's what I ended up going with and it works great.

{{#es-affix offset="400" classNames="scrollspy"}} <ul class='nav'> <li class='help-section'>Getting Started</li> <li class='help-subsection'><a href='#create-account'>Creating an Account</a></li> <li class='help-subsection'><a href='#find-friends'>Finding Friends</a></li> <li class='help-subsection'><a href='#details'>Your First Event</a></li> </ul> {{/es-affix}}

Thanks again for working on this! Best, Eric

ehubbell commented 9 years ago

Ran into a new issue...

When I have the page scrolled and then reload the page, it's loading at the same position in terms of page scroll however the .affix method isn't triggered. Whether I scroll to the top or bottom of the page I can't get it to activate. The only way to activate it now is to navigate from route to route.

Let me know your thoughts on this. This is a less urgent fix (IMO) but still worth looking into at some point.

Cheers, E

pierrickrouxel commented 9 years ago

It's normal for topOffset. I edited my message to change the property but if you read the issue from your mail you haven't got the correction.

I will look the next issue.

pierrickrouxel commented 9 years ago

I can't reproduce your issue on my documentation. It uses affix for menu. When I scroll and reload, all work correctly. Can you try on my doc and if it works send me an example.

Thank you.

ehubbell commented 9 years ago

My apologies. I had a line of code incorrect on one of our help center pages. We’re all set.

Thanks again, Eric

On Sep 23, 2015, at 1:38 AM, Pierrick Rouxel notifications@github.com wrote:

I can't reproduce your issue on my documentation. It uses affix for menu. When I scroll and reload, all work correctly. Can you try on my doc and if it works send me an example.

Thank you.

— Reply to this email directly or view it on GitHub https://github.com/pierrickrouxel/ember-strap/issues/4#issuecomment-142520290.

pierrickrouxel commented 9 years ago

Thanks I close the issue.