When my pages load, it's as if the content is pushed up and then when loaded it pushes back down.
It makes my website feel clunky. I'm stuggling to figure out how to make it stay where it is while loading.
Can anyone help?
Thank you
http://www.customlogoshop.com/logo-design
The problem lies with the script you are using to make the header sticky. It is having to wait for the page to render so that it can get the height of the element with a class of '.top-bar-container' and append it to the element with the class of '.sticky-container' element.
I would suggest either finding a different plugin or see this other stackoverflow question for a simple implementation of a fixed header: position-fixed-header
Related
I'm making a web page to try to learn HTML, CSS, PHP, and Javascript better. I've been revisiting the code trying to work out a few bugs and I discovered that my search bar is hiding the page contents and a button on my sidebar. I spent about 10 to 11 hours this week to try to fix the problem. The thing is though I'm not sure what the problem is and so I don't know which part of my code to post. All I need help with is identifying a few possible problems. If you have an idea what the problem might be I would really appreciate your help. So far none of my ideas have worked.
Here is a picture of what the page currently looks like.
Can you try adding a css property of padding-top: 100px; to the content under the header and see if that does anything?
from the diagram it looks as if your search bar has been removed from the normal document flow. This is usually done in CSS setting the position attribute to absolute or fixed rather than static or relative.
Check your styling for position and set it to static or relative.
Upon loading our website I am having some issues fixing the lower content snapping into place. Easier to see on a slower connection but it appears the content is not loading in the place its suppose to be. but loading lower than its suppose to be and then quickly moves into place.
Heres a link to a recording of what I am seeing via google chrome - cable speeds.
https://youtu.be/RgR0IyxiEvg
Thanks!
There is a class ctaWrapper on top. Upon scrolling you are adding a class fixed to it. That is causing the problem.
When the object is fixed, it goes out of the normal flow and gets the ability to stay on top of other objects.
In your case, the object on the top goes out of the flow and all the elements jump up a bit. Just add the class fixed to it. Because, I don't see the need to add fixed on scroll as the wrapper stays fixed all the time
You are using a plug-in called "Simple Custom CSS and JS" which places your custom css and javascript inside your page's body tag, right after most of your content.
Which causes those css rules and javascript codes to be applied with a delay. Moving those from your page's body to head will solve the problem.
Edit:
Now I have checked the video you provided. It looks like the problem is about your image gallery. Before your gallery is loaded, your image(with "FRYD") has full(or auto?) width and height. When your image slider starts loading, it scales the image down to match the container's width(or height). You should consider doing this scaling with css in your page's head. most probably something like max-width:100%;height:auto; would be sufficient.
After days of trying to figure out what was wrong it was a simple render blocking issue. The height attribute for the banner was loading after the rest of the content. So i had the elements above load in their css before the elements below. Which solved the problem.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!
Ive had a small problem that, although not frequent but it DOES happen to me and the problem is that,
when a page is loading, certain elements appear out of whack, out of place. Then when the whole thing is loaded, it goes where it should.
so for example, this latest wordpress site i just recently built for a client
http://www.islandlivingpatio.com/
when the page is first loading, the main image is off to the center/side. After full load all falls into place. At first i thought it was the slider i was using but then a friend just now asks me "why does my page do this (as described above) and i didnt have an answer.
http://discoverarmenia.org/tourism.php
notice how his content div loads to the side as well.
Im not sure how to address it. Its not a huge deal especially when the page loads fast but when on a slow connection its pretty apparent.
Any ideas as to how to correct this?
thanks in advanced.
I believe what is happening, is the content is getting loaded, and then styled. For example that tourism page, that div is floated left. So the all the content is loaded and then the styles.
Your Styles are also in the body not the head. Styles and Meta should live in the head!
Hope that helps.
Probably is because your main image is set to float:left(right);, when it's first loaded, it will probably not on the desired position until other elements besides it is loaded and squeeze it to the proper position. hope this helps!
you need to move your styles in header. For the tourism page this could be quick workaround:
<div id="slider" class="nivoSlider">
to
<div id="slider" style="height:376px" class="nivoSlider">
This will put your content div in right spot. Users with slow connection won't notice any div moves after styles are loaded.