No vite, no json, no jquery, not coming from a cdn, no 404’s in network tab or errors in console.
Just wanted to clarify first since all related-posts had to do with one of those factors.
Only using javascript, html, and css from scratch in VSCode.
Thank you for taking the time. I’ll be as concise as possible.
On my team page I had a function to get and set the height of some containers. These containers contained two children. An image and a text-block.
Half the time I refreshed the page, the height gotten would be incorrect, thus the height set would be incorrect.
The incorrect height was always short the exact amount of the image height. I figured the javascript was running faster than the image was loaded.
I wrapped this function in a DOMContentLoaded listener. Problem solved. Locally through Live Server.
I then host the website on netlify, grabbing it from the repository on Github.
Now the problem is back again.
I’m sure my javascript is less than great. I’m a beginner, so I could not be aware of simple problems that lead to this. If that’s the case I’ll go back to the whiteboard. Advice would be much appreciated, but I don’t expect it here.
I’m here cause I’m assuming it’s a first-timer-hosting-a-website-netlify problem, so I would love to learn more. I am reading the netlify guides, but I figure help takes time so I just want this out and about while I continue my research. I hope that’s okay.
Sorry to be the stackoverflow person, but I’m really curious as to why you need to set the height using JavaScript? What’s the use-case that you’re targetting? There are pretty limited and specific cases where you’d need JavaScript to interfere with your element’s heights, and those use-cases definitely don’t fall in web dev basics.
I’d advise not relying on JavaScript for this and considering if that’s really needed.
With that being said, I checked your website and I’m not sure which containers you’re talking about. I’m assuming it’s these:
…based on the description you provided + the fact that I see the height being set for those using dev tools. But that again brings me to my original question “why”?
Finally, none of this looks like a Netlify issue. You’re in a way asking us to debug your code which is not something that falls in scope of support. We’ll try, but the support will be greatly limited.
Hey hrishikesh, thank you for responding. I’m sorry in advance.
I wanted each section, upon scrolling into them, to activate the animation of the image and text-block to translate inward. I used intersectionObserver for this.
I didn’t want them displayed until the user scrolls to the section, so I put a class of hidden on the image and text-block.
The problem was if they’re display: none (.hidden), then they don’t have a height. Then the parent container doesn’t have a height. That caused all of the sections to sandwhich with the borders, causing every intersectionObserver to trigger(since theyre all in view), thus causing all of the functions to run which displays all the images and text-blocks of every section instantly.
So my solution was to get the height of the section, set it, and then hide the image and textblock. Now there’s space for the intersectionObserver to work as desired. One at a time upon scrolling to each section.
Then it wasn’t that responsive because the height was an absolute pixel value, so reducing the width of the page would cause the content(the image and text-block) to overflow their container. I could hand hold it with css media queries, but I wanted something more fluid and automated. This drew me into the javascript yet again.
I then added a resize event listener to then change the pixel measurement to a percentage upon resizing the page. This did what I wanted it to do.
In the end, everything does what I wanted it to. Could it be done better or in many different ways? absolutely. I definitely am not here expecting anyone to fix or enhance my code. I’m a beginner so my code isn’t going to be pretty yet.
This function/feature works locally, but doesn’t work on the hosted website. My focus is why is that? If it’s just my bad code, then wouldn’t it not work in both places?
Also, just to clarify, if it doesn’t break upon loading the site the first time, just refresh it a couple times and it’ll break eventually.
This doesn’t happen when I view my website locally through Live Server.
I will definitely re-evaluate the use of Javascript with all of this. I recieve and appreciate your advice. I barely know the basics of Javascript, so I would prefer to not use it. Series of events just lead me here and it worked locally.
Yes I’ve considered those alternatives, just went down a different path at first.
Do you believe my use of javascript is causing this to break only on the netlify hosted website and not locally?
Got rid of the javascript and went with the visibility route and the problem isn’t happening on the hosted website anymore. Just wish I knew why it would work locally but not on netlify.
Oh well.
Thanks for the suggestion to scrap my javascript. Thanks for taking the time.
