elia
WBWeb Bae
•Created by elia on 5/21/2024 in #❓︱questions
Horizontal Scroll with different length/(height)
yeah that blew my mind 😃
13 replies
WBWeb Bae
•Created by elia on 5/21/2024 in #❓︱questions
Horizontal Scroll with different length/(height)
My plan is to set the loading time of all assets to eager and build a progress indicator at the very top of the page
13 replies
WBWeb Bae
•Created by elia on 5/21/2024 in #❓︱questions
Horizontal Scroll with different length/(height)
Thank You!
I'll check the script-tag thing. I am assuming its some sort of typo as you said.
Thanks also for feedback on the images.
The progress indicator is a thign I wanted to build in anyways, so users have an easier time waiting. I didnt know you already had a tutorial on that, I'll definetly check it out. 😊
For creating the code, I asked perplexity AI, not even hoping it had a solution for that. It then spit out some javascript and refused to provide any other solution or workaround. I dont know much about java script and did not really have hope it would work. But it just....did. So far at least.
13 replies
WBWeb Bae
•Created by elia on 5/21/2024 in #❓︱questions
Horizontal Scroll with different length/(height)
Update:
Using following code, the width of each row now adapts to the number of panels and their width. It semmes to work perfectly fine:
*
const rowContainers = document.querySelectorAll(".height");
rowContainers.forEach(rowContainer => {
const panels = rowContainer.querySelectorAll(".panel");
let totalWidth = 0;
panels.forEach(panel => {
const panelWidth = panel.offsetWidth;
const panelMargin = window.getComputedStyle(panel).marginLeft + window.getComputedStyle(panel).marginRight;
totalWidth += panelWidth + parseInt(panelMargin);
});
rowContainer.style.width =
${totalWidth}px;
});*13 replies
WBWeb Bae
•Created by elia on 5/21/2024 in #❓︱questions
Horizontal Scroll with different length/(height)
13 replies
WBWeb Bae
•Created by elia on 5/21/2024 in #❓︱questions
Horizontal Scroll with different length/(height)
Hey
thanks for that quick reply!
Here is my page: https://strangelittlebeing.webflow.io/ollis-story
I hope it works, since there is a ton of images in it that I still have to compress also I played around with the offset values whis makes the scrolling a bit clunky. In the attached screenshot you can see the specific row I am talking about. Here, the images appear way smaller which they didnt when there were less image in that row.
13 replies