Join the Webstudio community

Home
Members
rory76510
r
rory76510
Offline, last seen 3 months ago
Joined December 13, 2024
In this video you can see that when the page loads, the html embeds get refreshed or reloaded a few milliseconds after page load.
You can see this from the blue refresh highlight that chrome dev tools shows over the top of the html embed elements that indicates something has changed on that element.

The reason I bring this up is Im having difficulty animating an svg element that i have inside an embed. For clarity in this example, I'm just changing the color to green using js.
You can see that the color turns to green as per the js DOM manipulation, but then when the html embed gets reloaded/refreshed, my manipulated properties are gone.
Interestingly enough, no further manipulation to the elements will take effect now that this embed refresh behaviour has taken place.
If I set a timeout function and set the js to target the elements 2 seconds after page load (after the html embeds have refreshed), I can now freely manipulate the svg.
The issue Im facing comes from the fact that the elements I target with js that are within an embed disappear from the DOM and get replaced with new elements during this embed refresh behaviour.

I'm just looking for some info into what this embed refresh behaviour is about.
If I could find a way to trigger a function only after the html embeds have finished being refreshed that would be great, that way I can target the refreshed elements within the embed and things would work smoothly.
At the moment, I can trigger the functions after the refresh behaviour by using a timeout function to wait 2 seconds (by which time embeds have been refreshed) but that doesn't seem like good practise for production considering different users face different loading times etc.

The embed refresh behaviour occurs only on the live site, manipulating elements inside an embed with js works fine within the canvas editor.
4 comments
O
r
Hey! Just wondering if I'm missing something, is there any way in Web Studio to target type selectors like all H1s or all links (to take away the default underline for example)

I also noticed there was 1em padding on all paragraph elements by default that I would like to be able to take off by targeting All Paragraphs.

Easily done with custom css of course, just wondering if I'm not noticing a way to do this with the interface
4 comments
r
O