Nice code.
It worked, but with an issue.
The bottom of the image frame continues to expand downwards on top of the content lower in the page when the browser window is widened.
Is there a way to allow it to stretch only to a certain point so it stops when it gets to that point?
I'm using the Ultimate, single page wide template.
I appreciate the help.
Sure, with some little changes. But in this case it is better to set the size of your animated gif directly in the placeholder code to avoid distortion...
My apologies, there is a little bug in version 2. I have forgotten to change the file name back to index_htm_files/...
Here is a corrected example. The approach is slightly changed. You can define the minimum width and maximum height with the width and height of the placeholder. I would recommend to use the full document width as scrollbars will be added anyway if the browser window is smaller than that. The placeholder still should be horizontally centered on the page. Only the width and filename of the gif has to be entered to the code.
Just realized that this is about a simple image. You do not need to use the transform stuff in this case. Here is a simpler code:
Code:<img id="stretchgif" src="index_htm_files/waves.gif" style="width:100%;height:auto;"> <script> function SG_resize(){ var width=Math.max(parseInt(window.getComputedStyle(SG_WinSizeElem).width),SG_MinWidth); SG_el.style.width=width+"px"; SG_el.style.marginLeft=-Math.round(width/2)+"px"; } var SG_WinSizeElem = document.createElement("div"); document.body.appendChild(SG_WinSizeElem); SG_WinSizeElem.style.cssText="position:fixed;top:0px;left:0px;height:100%;width:100%;z-index:-99"; var SG_el=document.getElementById("stretchgif").parentNode; var SG_MinWidth = parseInt(SG_el.style.width); SG_el.style.overflow="hidden"; SG_el.style.left="50%"; if (window.addEventListener) { window.addEventListener("resize", SG_resize); } else if (window.attachEvent) { window.attachEvent("onresize", SG_resize); } SG_resize(); </script>
We're up.
Thanks!!!
www.stierman.net if you're interested on how it looks.
It takes a few seconds to load, but I guess that's to be expected.
Bookmarks