Embedded Windy at bottom of page doesn't come up centered properly.
-
Hi,
First off, thanks for a really cool service. I came across this about a month ago when looking to jazz up my observatory's weather page a bit. I've embedded the provided frame code below another linked image from NOAA GOES. You can see the result at https://weather.orionranchobservatory.com/extras.htm. The problem that you should encounter is that when you scroll down to the Windy frame, it's centered in Oklahoma instead of Central Texas. If you refresh the page while viewing the Windy frame, then it will center properly and you see the icon highlighting the location. I'm guessing that this has something to do with an interaction between the visible window and the scrolled location, but don't know if there's an HTML way for me to fix it vs. something with the linked data itself that would need to be fixed.
Thanks for any guidance,
Beo
-
Have you found a solution to this? If the iframe (with
detail=true) is not in the view when the page loads and users scroll down, the iframe loads while users are scrolling and the auto-centering does not work.I specify width and height in the call, so not sure why auto-centering is needed at all.
Any suggestions more than welcome!
-
Sorry for the double post but couldn't seem to be able to edit the previous.
This does not happen on Safari, and here is a jsfiddle in case it's of any use:
https://jsfiddle.net/vm4e78j3/5/ -
workaround hack for you:
< iframe style="border:0px; position:fixed; left:0px; top:0px; opacity:0.01" onload="setTimeout(()=>{this.style.position='relative'; this.style.opacity=1},1000)" width="650" height="800" src="https://embed.windy.com/embed2.html?lat=30.69&lon=-98.1&zoom=7&level=surface&overlay=wind&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&detailLat=30.69&detailLon=-98.1&metricWind=default&metricTemp=default&radarRange=-1" >< /iframe>
