CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MintWelsh
MintWelsh

Reputation: 1259

strange results differing between left and right positioning

This is a strange bug i'm facing, i don't really understand the problem so forgive me for the obscure title. The problem is I'm developing a SPA style site and i want the content to slide in from the right (when the buttons at the bottom are clicked)

I thought this would be easy, but for some reason it is easy to achieve from the left, using the example below

.page {
  right: 100%;}
  .page.active {
    right: 0; }

https://jsfiddle.net/pphfstos/3/

and less ideally to slide the full width across like this

.page {
  left: -100%;}
  .page.active {
    left: 0; }

https://jsfiddle.net/pphfstos/4/

But when i try to create the same effect as the first example but from the right it not only doesn't work but totally seems to destroy the page

.page {
  right: -100%;}
  .page.active {
    right: 0; }

https://jsfiddle.net/pphfstos/5/

There is other code involved as you can see in the fiddle, but these are the only things that are different between the 3 examples Can anyone explain what is happening and how to fix it?

Upvotes: 2

Views: 42

Answers (1)

C3roe
C3roe

Reputation: 96240

Content you position outside of the viewport to the left is actually hidden, and can’t be reached via scrolling.

Content you position outside of the viewport to the right however “extends” the page in that direction, and can be scrolled to.

Remove the overflow-x: hidden from html/body in your first and third fiddle, and you see what I mean – in the first one, the content positioned to the left is hidden, and no scrollbar appears; in your third fiddle however you do get a scrollbar, and the content positioned to the right can be reached via scrolling, moving the part of your page that is initially visible to the left while you’re doing so.

Now, setting overflow-x: hidden removes the ability to scroll using the mouse; but the viewport can still be “shifted” to display that content, for example by navigating to an anchor – and that is what your links are doing. (But because this is an “instant jump” and not smooth scrolling, you don’t see your initially visible content move away, it is just gone instantly.)

So you simply need to suppress the default action of your anchor links in your click event handler:

mainNavButton.click(function (e) {
    e.preventDefault(); // prevent event default action
    // … rest of your code

– and the effect of the page ”jumping” to the anchor position is gone.

https://jsfiddle.net/pphfstos/6/

Upvotes: 3

Related Questions