Highlighted

Why do my web pages "jump" when moving from one to another even if created from the same template?

New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

I have 3 websites all created the same way from my own templates (different templates for each site) but all have the same problem.  I am using Dreamweaver CS5. My latest site is berksandmarlboroughdownsvillages.co.uk which has a page for each village in the Berkshire and Marlborough Downs. The site uses two templates, one for all the "village" pages and the other for all the other pages (Home, List of villages, About the downs, etc.). When moving from one page to another there is a slight but noticeable "jump" to the right and back again, even if the pages were created from the same template.

I have spent hours trying to work out why this is as I have never seen this fault on other sites and obviously it shouldn't happen.  I have checked through the code, tried things like standardising page lengths so they either all have or do not have a vertical scroll bar, centralising the site, but nothing works.

If anyone has the answer please let me know.

Views

206

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Why do my web pages "jump" when moving from one to another even if created from the same template?

New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

I have 3 websites all created the same way from my own templates (different templates for each site) but all have the same problem.  I am using Dreamweaver CS5. My latest site is berksandmarlboroughdownsvillages.co.uk which has a page for each village in the Berkshire and Marlborough Downs. The site uses two templates, one for all the "village" pages and the other for all the other pages (Home, List of villages, About the downs, etc.). When moving from one page to another there is a slight but noticeable "jump" to the right and back again, even if the pages were created from the same template.

I have spent hours trying to work out why this is as I have never seen this fault on other sites and obviously it shouldn't happen.  I have checked through the code, tried things like standardising page lengths so they either all have or do not have a vertical scroll bar, centralising the site, but nothing works.

If anyone has the answer please let me know.

Views

207

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

Are the "jumping" pages longer than the browser window?

The addition of the scrollbar on the right of the browser window will create a "jump" effect as everything moves over 20 pixels to make room for it. It's not something anyone but those of use with varying levels of Designer OCD will notice.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

Jon

Some of the "jumping" pages are longer than the browser window and others are not. The page length makes no difference. And whether there is a scroll bar or not makes no difference.  The content jumps a few pixels to the right and then jumps back again.

The style sheet is incorporated in the Head of the template so would it not be loaded first?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

Try getting rid of the StatCounter and see if that solves the problem.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

Actually, nevermind that, that looks very much to me like you have a case of FOUC...

Flash Of Unstyled Content

Basically, parts of your page are loading before they're 100% styled by your css. It might take a little doing, depending on how your pages are created, but there are many articles on eliminating FOUC (and the more maddening version without the O) online that can help you eliminate that oddness.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

I'm not seeing any jumping between pages but the code contains errors that could effect page rendering in some devices.

[Invalid] Markup Validation of http://berksandmarlboroughdownsvillages.co.uk/index.html - W3C Markup...

Google's Mobile Friendly report shows some page loading issues.

Mobile-Friendly Test - Google Search Console

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

I'm not seeing any jumping between pages

I initially observed a slight jumping as the OP suggested but then nothing as I visted more pages and returned to the pages which initially exhibited the jumping. I don't know why. My first thought as to what would cause an issue like that would be the allocation of the browser scroll bar on longer pages, but that doesnt seem to be the case.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

I  don't know for sure but think the cycling images (top right) might be part of the problem.   Replacing with a single static image might be worth testing.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

I  don't know for sure but think the cycling images (top right) might be part of the problem.   Replacing with a single static image might be worth testing.

Don't know, its very abitrary when it happens, so its difficult to pin down the source of the issue as its seems to disapear and then reoccur.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
New Here ,
Jul 03, 2019

Copy link to clipboard

Copied

Thanks for this suggestion.  I had previously tried removing the cycling images but that made no difference.  In any case I have exactly the same problem on my other websites where there are no cycling images. oxfordshirevillages.co.uk for example.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 0
New Here ,
Jul 03, 2019

Copy link to clipboard

Copied

We're losing sight of the fact that not all pages "jump" whereas all have the cycling images.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 0
New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

Nancy I had already looked at this but I'm afraid I don't understand the errors. What is the significance of the red > in each case?

Regarding the errors in line 224 for example what is the significance of the reference to "type" and "alt" attributes?

You can tell from this that I am a novice!

Regarding your suggestion about the cycling images I have tried replacing with a single image and as far as I can remember this made no difference. That said, I do want the cycling effect rather than a single image.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

Don't worry about "type" attribute.  In HTML5 you don't need it.

Every image should have an alt="description" for accessibility reasons.  If the image doesn't load, the alt text appears in its place.  It's also read aloud by screen readers to visually impaired users. 

Orphaned tags are a bigger problem.  Every tag should have a matching closing tag.  It it doesn't, some browsers will have trouble displaying the page correctly.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Every image should have an alt="description" for accessibility reasons.  If the image doesn't load, the alt text appears in its place.  It's also read aloud by screen readers to visually impaired users.

And should also have the width attribute populated to ensure that the space is reserved while loading.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 1
New Here ,
Jul 03, 2019

Copy link to clipboard

Copied

Thanks Nancy. i'll try adding alt details to the cycling images.  But do you really think this will affect the original problem?

I can't see where there are orphaned tags.  Is that the reason for the red > ? Which tag is orphaned in line 242 for example. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 0
New Here ,
Jul 03, 2019

Copy link to clipboard

Copied

Thanks Ben.  I'll add the width to all the cycling images too. do you think this is likely to effect the original problem? I would have thought not.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 0
New Here ,
Jul 03, 2019

Copy link to clipboard

Copied

Ben we're losing sight of the fact that not all pages "jump" whereas all have the cycling images.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 0
Adobe Community Professional ,
Jul 03, 2019

Copy link to clipboard

Copied

Try adding the following CSS

html {

  overflow-y: scroll;

}


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 1
Adobe Community Professional ,
Jul 03, 2019

Copy link to clipboard

Copied

This is a web forum, not private e-mail.  You do not need to repeat your comments to each person. 

Dissable all CSS styles and test your site for page jumping.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 1
LEGEND ,
Jul 03, 2019

Copy link to clipboard

Copied

Conclusion to this one is the code is complete and utter junk. The browser is trying to dechiper what the hell it needs to do with all the width declarations (probably none add up to the correct width) so the browser is re-adjusting on the fly, not to mention all the invalid heights, empty and redundant tags. I'm actually surprised it performs as well as it does. This is only fit for the bin.

Sorry to be the provider of this news but someone has to be truthful.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 0
Adobe Community Professional ,
Jul 03, 2019

Copy link to clipboard

Copied

osgood_  wrote

Sorry to be the provider of this news but someone has to be truthful.

I agree the current site is showing its age.  ThickBox ended in 2007.  That makes the site at least 12 years out of date.  No matter how you look at it, it's overdue for a re-build with modern  code and responsive layouts.   The current site is not practical or sustainable.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 03, 2019 2