search

abitgone / jQuery-Plugins

A bunch of plugins that ease development for front-end designers with little or no JavaScript or jQuery knowledge.
http://abitgone.github.com/jQuery-Plugins
Other
44 stars 14 forks source link

Carousel pager invisible when visiting #anchor2 #10

Closed Andrej2 closed 11 years ago

Andrej2 commented 11 years ago

If you are quick enough to click on the "next" button before JS takes over, or if you happen to not use JS altogether or get a URL from such a person, it can look similar to this: http://abitgone.github.io/jQuery-Plugins/Carousel/#cei2 (i.e. pointing to an anchor)

In this case, the browser employs automatic scrolling of the content into view inside the carousel-container. This is good when there is no JS, but when JS is enabled, the Prev and Next buttons get outside the visible area (get inside the hidden overflow).

Did not think much about it (how to solve it), hence this is just a bug report.

abitgone commented 11 years ago

Hi @Andrej2.

Thanks for reporting the issue. I jumped to the wrong conclusion almost straight away, thinking that you were actually referring to something completely different. It's amusing that I tested in a JS environment and a non-JS environment, but forgot to test in a slow-to-load JS environment.

My bad. Oops.

The solution is relatively straightforward and I'm confident I can get a fix in place for next week (I'm on holiday at the moment, and I'm replying/editing this on my phone). Before the JS activates, the browser automatically scrolls the carousel's child elements off to the left.

In the example you mentioned above, scrollLeft on the data-carousel element gets set to 600. It'll be fairly trivial to check to make sure that scrollLeft is 0 and, if not, perform some additional initialisation - namely, to reset the scrollLeft to 0 and then get the carousel to change the current item index appropriately, based on the target in the URL's hash fragment.

Thanks for reporting the bug - it's a nice edge case!

abitgone commented 11 years ago

Reopened issue after I prematurely closed it earlier.

Andrej2 commented 11 years ago

Apparently there is a typo before the new method post_initialise, a missing '}'. I've also done some quick tests and the problem is not fixed here, i.e. scrollLeft is not looking to be reset. (Maybe a browser timing issue, would be an edge case of the edge case :smiley: )