Whole page jumps when switching tabs in a page master controlled set up: SOLVED

[droidgoo]

Using index.html as my master page with the nav menu and just noticed the webpage jumps a few px to the right on certain pages.

Tried using update components to ensure all pages are based on the same master page, but it still does this behavior.

Anyone have experience tracking this kind of thing down, or any clue as to what might be causing it?

the first pic is normal with the edge of the window for reference

the 2nd pic shows the whole page jumps over 10-15px

the behavior does not manifest in PG but shows up on the hosted page viewed with Fire Fox

Justice in Society - Government vs Corporation

switch between “info” tab and the sub tab “reading” to see the jump, then if you click on any of the buttons, it will jump back into place even tho it’s the same page.

also does this between the “umbrella” tab and either the “vetting” or “debates” tab

but all the other tabs and pages seem fine.

i guess i can live with it, but i’m stumpped

[droidgoo]

now the info tab is doing it too…all the other menu items are fine but when i click on the inform menu it jumps… this i really weird, it’s spreading like a virus.

maybe they will ALL get infected and solve my problem that way

i’ll even throw another bit of weirdness on the pile, when i right click in FF to do “inspect element” using the developer view… it shifts back to where it’s supposed to be

am i crazy, can anyone else confirm this behavior?

[RobM]

Hi @droidgoo,
I took a look at your pages in both FF and Chrome. While I see what you mean about content placement on the screen for the different pages, I wasn’t able to replicate the jumping after selecting “inspect element”. However, when I open the URL with Pinegrow, it looks the same.

If you look at the “Inform” page the left edge matches up with the double greater-than of your breadcrumbs. When you go to the reading page, the content jumps to the right. Inspecting the “.main-content” on both pages shows equal margins and padding. However, if you look at the <figure> within that div on the reading page (class=“table5”) you can see that there is 24px of margin on the left and right sides. In contrast, no margin is added to the content of the inform page. So your jump is that 24px of margin - I think the screen references maybe make it look more prominent in the browser than in Pinegrow?
Hope this helps,
Bob

[AllMediaLab]

<! twitter card BEGIN >

<! twtter care END>

Are you sure it’s not just the wrong comments you made on all pages!

Must be:

<!-- twitter card BEGIN-->

<!-- twitter card END-->

[Thomas]

Hi guys,

if your asking me (which you never should), “jumping” is caused by side-scroll at specific page-widths. Theoretically, if you change the @media queries (in the menu000.css) to a higher number (as in the code below), side-scroll disappears:

/* ======= RESPONSIVE ======== */
@media (min-width: 700px) {
#tmm {
    display: none;
}

.menu {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'logo title' 'nav nav';
}

.burger {
    display: none;
}

.logo {
    grid-area: logo;
}

.banner {
    grid-area: title;
    width: 330px;margin: 0px !important;
}

.main-menu {
    grid-area: nav;
    display: flex;
    justify-content: space-evenly;
}

.menu-item {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
}

.toggle:checked ~ .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    z-index: 1;
}
}

@media (min-width: 1100px) {
.menu {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto;
    grid-template-areas: 'logo title nav';
}
}

Reason being, that things appear later (from the min side) or earlier (if you see it from the max side). Just a guess though.

Cheers

Thomas

[droidgoo]

oh, good catch!

thank you for that one… i rely so much on the ctrl-/ feature of my text editor, i must have done this one by hand prolly looked up at the doctype and just copied that

here’s another little twist, when i change this text in my master page, and then use Update Whole Project it wipes out all the <?php stuff above my <!DOCTYPE html> tag in the page that must have the php at the top in order for the header() redirect to work.

just a quirk, but an annoying one as i have to remember to paste all the code back in after any kind of site wide component updates from PG.

all that being said, sadly, this easy fix was not the cause of the page jumping, so i must dive deeper into all that margin business.

[droidgoo]

thanks for taking the time to look at this, it’s much appreciated.

i tried changing the margins of the .table5 class to auto and also just commenting out the margin and letting the default <figure> margins take over but it did not affect the issue.

the issue is more related to the entire page, from <header> to <footer> and is not limited to the main <div>.

but now that i’ve looked at it both ways, i rather like the way that class looks without any margin, thanks again.

[droidgoo]

Ah, yes… that’s what it is.

I don’t notice it in PG because there is ALWAYS a vert scroll bar, if i resize my browser really short so there is always a vert scroll bar, the side jumping behavior is eliminated.

it only happens on pages that just so happen to be shorter than the browser window, which is why there seemed to be this random creep in the effect at different times when my browser happened to be a different size.

good call, Thomas.

I looked at ur suggested break points, but that really doesn’t affect the vert scroll which is what the problem was (is).

the first breakpoint is a weirdly specific number, and if i remember right there were conflicting needs within the mobil menu i was trying to balance and wound up there as a compromise.

changing it didn’t break anything obvious, but i’m gonna leave it there until i have time to dive back into the menu code… sleeping dogs and all that.

so long story short, unless i’m willing to pad out my page height so that vert scroll would always be present, i’m just gonna have to live with it.

At least now i know it’s not something i’ve screwed up

thanks again to you and everyone for taking time to help this inexperienced website maker to learn more of the trade secrets.

this PG forum is way nicer than stack overflow

[droidgoo]

to sum up, the issue is related to the presence of the vertical scroll bar along the side of the page when the page height is greater than the view port size.

some of my pages where too short to trigger the scroll bar so when switching to a page that was long enough, this sideways jumping effect could be noticed.

quite common artifact, apparently.

here is a hack i found that i might try

Force Vertical Scrollbar | CSS-Tricks