PDA

View Full Version : Autumn Leaves Script invoked from diff frame



codymaxx
07-31-2005, 04:08 PM
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. :confused:

Twey
07-31-2005, 04:11 PM
Wherever you see "document," change it to "parent.document".

jscheuer1
07-31-2005, 04:41 PM
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=fallfrom 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
07-31-2005, 04:42 PM
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
07-31-2005, 05:13 PM
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
07-31-2005, 06:38 PM
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
07-31-2005, 07:20 PM
OK, here's a demo (http://home.comcast.net/~jscheuer1/side/leaf_iframe_parent.htm). 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
07-31-2005, 08:27 PM
Thank you, John! That's exactly what I wanted.

Twey
08-01-2005, 06:36 AM
Ah, I see. Whoops.

codymaxx
08-08-2005, 04:10 AM
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!

jscheuer1
08-08-2005, 03:28 PM
I am unable to observe or duplicate the horizontal behavior you mention but the vertical jumping is well known to me. There are three ways of dealing with it that I can think of:

1 ) If your page is tall enough, you will notice that no jumping occurs until you get to the bottom. So, just add a bunch of white space to the bottom of the page like:

<p>&nbsp;</p>

repeat that as many times as needed after your content. To make it Mozilla specific use (at the bottom, just above the </body> tag):

<script type="text/javascript">
if (document.getElementById&&!document.all)
document.write('<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>')
</script>
2 ) Set the style of the body to overflow:hidden, in the style section:

<style type="text/css">
body {
overflow:hidden;
}
</style>or in the body tag:

<body style="overflow:hidden">This is the best looking solution but only a good idea if your page is less than 800x600 in overall dimensions as, if it is larger, a good portion of it will be unviewable to folks with that resolution. If your page is larger than 1024x768, this is an even worse option.

3 ) Edit the code. In the function called fall() find this line:

var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;Make it look like this:

var WinHeight=(ns||ns6)?window.innerHeight-70:window.document.body.clientHeight;Careful, this line appears twice in the code, but only once in the function fall(). This solution is in many ways the best except that it makes the leaves pop out of existence about 20 or so pixels before the bottom edge of the screen in Mozilla.

codymaxx
08-09-2005, 01:00 AM
Thanks again, John. I opted for Solution #3. There is still a problem. My implementation can be viewed at http://mausworks.com/prehess/newsletters.html
user codymaxx pw testing
(easier to see than explain sometimes)
Note that the page doesn't jump any more when loaded in Netscape. However, when I click on the Kids' Choice tab and load the new iframe, the fall function reverts to its original behavior with the scroll bars when it is called by the child window. I don't understand...

jscheuer1
08-09-2005, 06:35 AM
What is that? I mean the thing that gets mixed in with the stars. Anyways, just from looking I would guess that it is due to the size of the new image. Probably by increasing the the number (since it is negative, actually decreasing it) to say, -80 or -90 (perhaps more) should stop the jumping. Similarly with the horizontal jumping. Let's look at the the lines involved again (as they originally appeared in the fall() function):

var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;Try:

var WinHeight=(ns||ns6)?window.innerHeight-90:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-90:window.document.body.clientWidth;You might want to adjust these values from the child pages:

var WinHeight=(ns||ns6)?window.innerHeight-nsSub:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-nsSub:window.document.body.clientWidth;and near the top of the script where we have now:

var falling, off=1make it:

var falling, off=1, nsSub=70Now on the child page(s) we can do this:

window.onload=function(){
parent.nsSub=70
var p=0, leafs=parent.document.getElementsByTagName('img')
for (i = 0; i < leafs.length; i++)
if (leafs[i].className=='leaf'){
leafs[i].src=parent.grphcs[p]
p++
if (p>=parent.grphcs.length)
p=0
}
if (parent.off)
parent.fall();
}Where 70 can be made to be 90, 100 or whatever it needs to be.

jscheuer1
08-09-2005, 07:06 AM
I also thought, looking at your site, that the stars and (finally figured it out) the peace eagle fall too fast in IE. Just my opinion, they definitely fall faster than in Mozilla (FF, NS6+). If you want to adjust that, find this line on the parent page's script (it appears twice but, with slightly different spacing used, so change both of them):

Speed[i]= Math.random()*5+3;and

Speed[i]=Math.random()*5+3;make them like:

Speed[i]=Math.random()*5+speed;Make sure to use all lower case letters so as not to confuse the new variable with Speed with a capital s. Now you can add this line:

speed=ns6? 3 : .5just below this one:

ns6=(document.getElementById&&!document.all)?1:0;That is if you agree with me about this speed issue. It is entirely up to you.

Twey
08-09-2005, 08:30 AM
Typo in #11 (http://www.dynamicdrive.com/forums/showpost.php?p=14867&postcount=11): the closing brace is an opening brace.
Should be

<style type="text/css">
body {
overflow:hidden;
}
</style>

jscheuer1
08-09-2005, 09:21 AM
Ooops, corrected in the original by yours truly.

codymaxx
08-09-2005, 05:29 PM
John - you're a mind reader - I was going to ask about how to slow the objects but wanted to try to figure it out on my own first. It seemed especially bad with the eagles plummeting to the earth! I like the idea of controlling the "anti-jumping" value from the child. btw, I noticed that the jumping also occurs in Opera. Thanks again for all your help.