Help With Found Fireworks Script

[cgweaver]

I found this really cool fireworks script but the site where I found it has no contact info and no active forum. So here I am asking for some help configuring it. All I would like to do is restrict its behavior to an area within the window as opposed to the entire window.

Thanks.

[Twey]

Could you link to the actual script, rather than a site containing many "fireworks" scripts?

[cgweaver]

Sorry! Here it is.

[Yugiohwiz]

That is just a page of a demo of it :-/

[dead-poetic]

http://www.javascript-fx.com/submitscripts/fireworks/

[cgweaver]

That is just a page of a demo of it :-/

Right! The idea is you look at the source behind the page.

[jscheuer1]

I found this really cool fireworks script but the site where I found it has no contact info and no active forum. So here I am asking for some help configuring it. All I would like to do is restrict its behavior to an area within the window as opposed to the entire window.

Thanks.

Which area? Where. What size area?

The script sets its dimensions from the dimensions of the window, simply making those dimensions smaller will restrict it to an upper left hand corner area of the page defined by the new dimensions. Or, by putting it in an iframe, it can be placed anywhere on the page. There are probably other options but, however you restrict it, it tends to squish the images together and speed them up. This can be compensated for elsewhere in the script. Still, to know how best to advise you, I'd need to know better what kind of restricting you want to do.

[cgweaver]

Which area? Where. What size area?

The script sets its dimensions from the dimensions of the window, simply making those dimensions smaller will restrict it to an upper left hand corner area of the page defined by the new dimensions.

That's what I don't know how to do and would like to know how to do. I don't see how this script is getting its dimensions from the window.

Or, by putting it in an iframe, it can be placed anywhere on the page. There are probably other options but, however you restrict it, it tends to squish the images together and speed them up.

I could put it in an iFrame but I would rather put it in a Div. Would that have the same effect? I'll try it.

This can be compensated for elsewhere in the script.

Where? How? I would like to know how to adjust the speed.

As you have no doubt surmised, I'm new to javascript syntax. I've done a lot of OOP over the past 12 years but I'm just getting started with js. Any help you can give me will be great. I need to get this site finished in a hurry.

Thanks.

[jscheuer1]

OK, sounds like you want them in a division. You can do that by placing a division tag around the script:

<div style="position:absolute;left:300px;top:250px;">

script goes here

</div>

That won't do much good unless you also change the size of the display area of the fireworks. That is done here (red part added by yours truly):

if(window.innerWidth)
{
	gX=function(){return innerWidth/3;};
	gY=function(){return innerHeight/3;};
}
else
{
	gX=function(){return document.body.clientWidth/3;};
	gY=function(){return document.body.clientHeight/3;};
}

With the above additions, I've restricted the size to a third of the users window, instead of the full size of the window (the default settings). You could also use fixed dimensions:

if(window.innerWidth)
{
	gX=200;
	gY=300;};
}
else
{
	gX=200;};
	gY=300;};
}

The choice is yours. A flexible page layout can and should use the first (relative to the users window size) method. A rigid page layout will probably require the fixed method. Flexible pages are always better but, if yours isn't flexible, you will need to set the dimensions absolutely as in the second example.

Now, that takes care of 'Where?' and 'What size?". But, the smaller the display area of this script gets, the more squished together the images become and the faster they animate. The way to control the number of images is near the end of the script, this is the default line:

myFW = new JSFX.FireworkDisplay(20, "fw03", 21);

The number in red is the number of individual fireworks. The fw03 is the directory for the script's images and 21 is the number of images used to animate each individual firework. The red number is all that needs to be changed if you are using the default version of the script from the distribution zip. I found that for my purposes (the one third size display) 6 looked OK, but this will vary on different sized windows. It should be reasonable on most, though. If you are using a different size than I did or if you have different sensibilities, you will have to choose your own number. Now the last adjustment you may need to make is the speed. Adjust the number of fireworks first as, this as well as the size will affect the speed. The speed is controlled here:

this.timerId = setInterval("window."+this.id+".animate()", 40);

The higher the number the slower things will go, I liked 70 for my little experiment, 40 is the default.

That's it!

[cgweaver]

Thank you so very much. This is great!

My goal is to modify the script so that it adjusts its display size, speed, and number of fireworks to accommodate the size of its immediate parent, div most likely.

Thanks again.