search

joshdmiller / ng-curtain

AngularJS directives that create multiple fixed panels that unroll with an amusing effect. Port of the now defunct victa/curtain.js.
http://joshdmiller.github.io/ng-curtain
MIT License
85 stars 8 forks source link

Browser back/forward buttons do not work in some browsers #5

Open jmdobry opened 11 years ago

jmdobry commented 11 years ago
  1. Visit http://joshdmiller.github.io/ng-curtain
  2. Scroll to the bottom
  3. Hit your browser's back button.

Doesn't work in some browsers

joshdmiller commented 11 years ago

Indeed! It looks like the history is working in Chrome, but rather than responding appropriately to the history change, it just recalculates the correct location based on the scroll position and assigns the location again, overwriting the new value with the old! I'll have to take a look at what's going on here, but it's weird that it does this only in Chrome. :-/

As for the "forward" problem, that's actually the way it should be. If you navigate A -> B -> C and click back, you are on B; back again goes to A and forward goes back to C. But if you go to D from that point, there is no "forward" to C anymore because history is linear. Forward history is always overwritten by new navigation actions; this is just how browsers work.

Thanks for reporting this, @jmdobry!

jmdobry commented 11 years ago

When I said "until back up to /#/home" I meant backing up by using the back button. I didn't do anything to overwrite the forward history with new navigation actions. I only clicked the forward and back buttons.

Say D is the last slide. I would click the back button, taking me to C. The forward button becomes enabled. Click the back button twice more, taking me back to A. The forward button suddenly disables. Clicking the back button shouldn't disable the forward button—it should enable it.

Check out $anchorScroll. It may help with your implementation.

joshdmiller commented 11 years ago

If I scroll to the bottom of the page and then use the back button to get up to the very top, I can still use the forward button to advance down the page, so I can't duplicate that part of the bug.

As for $anchorScroll, that's not the same thing. That uses $location.hash() so it will work with routing; ngCurtain uses $location.path() because it doesn't make sense to use with routing. Without routing, using the hash ends up with funky-looking double-hash-mark URLs, which is not desirable. Not to mention that we couldn't use it anyway; ngCurtain has to fake the scrolling in order to establish the curtain effect because the curtains are always at the current screen position or directly above or below it, positioned statically.

But in either event, when a particular scroll position is reached, $location.path() is called to set the current path. History is managed entirely by AngularJS. When a new path is set, ngCurtain simulates the appropriate scroll and positions the elements. There may be some timing or event trigger issues associated with this - as noted, this is alpha-quality software.

I'll take a look at this when I get a chance, but for intrepid users a PR would be awesome. :-)