Autumn Leaves Script invoked from diff frame

[codymaxx]

Autumn Leaves
http://www.dynamicdrive.com/dynamicindex3/leaves.htm

I would like to invoke this script from within an iframe and have it use the entire page, i.e., the parent to the iframe. My idea is to have the falling object images cover the entire browser window and change to a different image when the iframe is reloaded.

Thank you for your assistance.

[Twey]

Wherever you see "document," change it to "parent.document".

[jscheuer1]

It is unlikely that will work. What is likely to work is to put the script on the parent page. Remove the line:

window.onload=fall

from the script. Then on the page that displays within the iframe make a small script:

<script type="text/javascript">
window.onload=function(){
parent.fall();
}
</script>

Changing the images depending upon the page loaded in the iframe is a bit trickier. My approach would be to modify the script so that the original images are represented by image objects and add to the main script on the parent a function to change the images with a single command issued from the child frame. Let's get the first part (activating from the iframe document) working first.

[Twey]

I think it would work... I had a quick look at the code and I saw no real reason why not. You'd need to change window to parent, as well.

[codymaxx]

Thank you both for your quick replies! I was not able to get Twey's solution to work to invoke the script from the iframe - but it could have been a typo on my part. Instead, I used jscheuer1's idea but simply added onload=parent.fall(); to the body tag of the page displayed in the iframe. I will let you know if I am successful changing the images. I was thinking maybe I could change the parent's preloaded images from the iframe, something like: parent.Image0.src=parent.grphcs[0]="FLleafbrnlrg.gif";
etc.


One more question - how would I "uninvoke" the falling leaves instead. For example, I load a new page into the iframe and want to turn off the falling objects altogether.

Thanks again for your help.

[jscheuer1]

Twey,

It won't work because the script uses document.write. Once you change document.write to parent.document.write and execute it from the iframe page, it wipes out the parent document, including the iframe containing the script.

codymaxx,

I don't think your approach to changing the graphics will work because once the script is loaded and displaying the leaves, it no longer relies upon the the array called 'grphcs' to determine what the falling images are.

I've got a little demo working here. I also had to make the falling images invisible to begin with because, as codymaxx probably sees, they stack up in the upper left corner otherwise, until set in motion by the loading of the iframe page. I've turned off this effect before. It requires giving this time out a variable name:

setTimeout('fall()',20);

and then later clearing it while, at the same time making the images invisible, to stop the effect. Once I add that in, I will put up a live demo.

[jscheuer1]

OK, here's a demo. Unfortunately the server doesn't allocate much bandwidth to these 'personal pages' so be patient at first if nothing happens when you click on the link above and when you click on the buttons and links on the demo. Once you've had it through its paces, everything should be cached and work as it would on an average speed server.

[codymaxx]

Thank you, John! That's exactly what I wanted.

[Twey]

Ah, I see. Whoops.

[codymaxx]

I've implemented John's solution and it works great in IE. However, in Netscape and FF, the script causes bottom and right scrollbars to appear and disappear as objects drift off the screen and thus the window contents appear "jumpy" and difficult to read. Is there a way to eliminate this problem (which exists with the original script also)? Thanks!