"animated" jpg help needed

[Merlin_AZ]

I have an old program that adds "moving" water to .jpg images.
I'd like to use one on my home page if it's possible.
The files created are either .gif or .avi.
I tried the .gif and it works, but the size is fixed, and doesn't stretch when the browser width changes, even if made "stretchy."
If I try to use the .avi file, it says that format isn't supported.
Any recommendations if it's possible?
Thanks in advance.

[gwpriester]

Xara used to offer these filters, snow, shimmering water, etc. but I think they discontinued support years ago.

I would get on Google and have a look see. I'm sure you can find a bunch of these.

[Merlin_AZ]

Hey Gary.
I already have a program that "animates" water on a jpg.
It outputs to .gif but xara won't make it stretchy.
It also outputs to .avi, but xara says it can't use it when I drag it in.
I'm trying to find out if it's possible to use on a web page.

[siran]

You can do it with a little javascript.
In the example there is a placeholder horizontally centered on the page. It has an animated gif attached with CTRL + ALT+ SHIFT + "A". The placeholder code just contains an img element pointing to the attached gif and some javascript code. The javascript code resizes the img to the window width. It is just a quick hack taken from a 'little project' I am working on.

[Merlin_AZ]

You can do it with a little javascript.
In the example there is a placeholder horizontally centered on the page. It has an animated gif attached with CTRL + ALT+ SHIFT + "A". The placeholder code just contains an img element pointing to the attached gif and some javascript code. The javascript code resizes the img to the window width. It is just a quick hack taken from a 'little project' I am working on.

Thanks.
I'll have a look at it tomorrow and let you know.

[Merlin_AZ]

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.

[siran]

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...

[siran]

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.

[siran]

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:

<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>

[Merlin_AZ]

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.