Flying Butterfly script - please stay on screen

[courthate]

1) Script Title: Flying Butterfly script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/butterfly.htm

3) Describe problem: I use this script on my band's website located at www.WorldofNosOtroS.de and I'm really enjoying it ... but how can I make the butterflies stay on the screen instead of flying out of it causing the browser to add scrollbars everytime they "leave".

The former website used to have frames and everything was fine but now I'm using div-boxes (right term in english?) and now the problem as discribed above appears everytime the little GIF-animations float too far to the left or to the bottom.

Is there a way to "teach them" to stay away from the borders of the browser?

[jscheuer1]

Wouldn't bats or something menacing be better for that page?

Give this version a shot:

<script type="text/javascript">

/*
Flying Butterfly script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.com
*/

var Ymax=8;                                //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8;                                //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000;                        //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='butterfly2.gif';
floatimages[1]='butterfly2.gif';

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function moveimage(num){
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx()-IDs[num].offsetWidth-3)IDs[num].Xdir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly()-IDs[num].offsetHeight-3)IDs[num].Ydir=false;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep :  -IDs[num].Xstep , (IDs[num].Ydir)?  IDs[num].Ystep:  -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
return typeof window.pageXOffset=='number'? window.pageXOffset : iecompattest().scrollLeft;
}

function getscrolly(){
return typeof window.pageYOffset=='number'? window.pageYOffset : iecompattest().scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x-IDs[num].offsetWidth-3+'px';
IDs[num].style.top=y-IDs[num].offsetHeight-3+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
return window.innerWidth? window.innerWidth : iecompattest().clientWidth;
}

function getwindowheight(){
return window.innerHeight? window.innerHeight: iecompattest().clientHeight;;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

</script>

[courthate]

Wouldn't bats or something menacing be better for that page?

Try the free music at our download-section to find out it would not

The script works fine for me, thanks a lot - but there's one more thing:

If I use the script at the very end of the sourcecode (right above the </body>-tag) it works fine and the butterflies stay on the screen, but if I include it into the main-div, so the butterflies fly above the whole website instead of hiding behind the content, it is the same as before.

Any idea?

[jscheuer1]

I noticed about the butterflies going behind the content, but I thought that might be how you wanted it. You have 7 butterflies, right? For those, add this to your stylesheet:

#pic0, #pic1, #pic2, #pic3, #pic4, #pic5, #pic6 {
z-index:90;
}

If you want to allow some of the butterflies to still go behind (which might be neat), just get rid of one or more of them from the selector, example:

#pic0, #pic1, #pic2, #pic3, #pic4 {
z-index:90;
}

Now the last two will still go behind.

Added Later:

I now see that you also have lightbox. Just to be on the safe side, make the z-index:90; (just changed it in the above). That's because lightbox uses z-index:100; If you want the butterflies to fly on top of the lightbox, make their z-index:200;

Oh, and you might want to use this image instead for your background, it is less than half the size and has transparency where it would go well with your layout:

[courthate]

You have 7 butterflies, right? For those, add this to your stylesheet:

Correct, 7 butterflies. But if I add one of your code to my css-file and add the butterfly-script into the main-div instead of the bottom of my code for the website - as mentioned on dynamicdrive - the butterflies still keep flying away off screen :-/

If you want the butterflies to fly on top of the lightbox, make their z-index:200;

That might be cool, too

Oh, and you might want to use this image instead for your background, it is less than half the size and has transparency where it would go well with your layout:

Yeah, thanks! I already wanted to use a png-file, but the original is made in Photoshop and when I tried to save it as a png-file the file-size was much higher than the one for a jpg-file. Did you use Fireworks to change it to a png or how did you manage it to get so small?

Also I had to play a trick on the IE as the older versions are not able to display PNG-files using transparency. I tried it with the code I'm using on my private Website (www.CourtHate.de) but it won't work with background images, so I had to create a similar div-box behind the real content using your png-file as a regular image instead of a div-background.

As you can see I'm already using your file on the website and sent out an official thank you in our latest news

Have a nice day
Chriss

[jscheuer1]

Correct, 7 butterflies. But if I add one of your code to my css-file and add the butterfly-script into the main-div instead of the bottom of my code for the website - as mentioned on dynamicdrive - the butterflies still keep flying away off screen :-/

Don't add the script to the main-div. The css code was to make the butterflies be on top even with the script at the bottom as it should be.

Yeah, thanks! I already wanted to use a png-file, but the original is made in Photoshop and when I tried to save it as a png-file the file-size was much higher than the one for a jpg-file. Did you use Fireworks to change it to a png or how did you manage it to get so small?

The PNG format has many options. You were probably saving in 16 million colors. It can also save in 256 colors, just like GIF. That is the mode I used, and I further reduced its size in image optimizer pro.

Also I had to play a trick on the IE as the older versions are not able to display PNG-files using transparency. I tried it with the code I'm using on my private Website (www.CourtHate.de) but it won't work with background images, so I had to create a similar div-box behind the real content using your png-file as a regular image instead of a div-background.

PNG files saved using 256 colors and single layer transparency don't need that.

[courthate]

Don't add the script to the main-div. The css code was to make the butterflies be on top even with the script at the bottom as it should be.

Oh I see ... I usually browse the internet with Opera - and guess what - it's again the only browser (from the ones I use to test my websites) who doesn't apply the changes with the butterflies :-/ Firefox and IE work correct. I now habe 4 of the fly on top of the content and three behind it. Thanks again!

The PNG format has many options. You were probably saving in 16 million colors.

Might be. PS7 hasn't got that many options to choose when you try to save as 24-Bit PNG

PNG files saved using 256 colors and single layer transparency don't need that.

If your image is using 256 colors and single layer transparency it still does. I tried it with my IE 6.0 (I don't need that thing so I don't update it) and the background image was missing after I told the stylesheet to use your PNG (background-image: url(..);) ... but as long as it works with the lowest div containing it as a normal image I'm fine with that ^^

Cheers
Chriss

[jscheuer1]

About png images in IE 6. I also have an old IE 6 and it shows them fine as backgrounds or as anything else, as long as they don't use alpha channel opacity. I tried a demo page, using the image I gave you as the background image for a division and it worked fine, including allowing the background to show through from the body in the transparent portions. If you are really seeing what you say you are seeing, there must be something else going on. But, as long as it works, I won't complain.

Opera is my primary browser, and unless it had cached an earlier version of the page, I'm not sure what you mean. I worked out everything I suggested for you in it first.

[courthate]

But, as long as it works, I won't complain.

Same for me

Opera is my primary browser, and unless it had cached an earlier version of the page, I'm not sure what you mean.

It seems to be up to the cached version. Now Opera shows it the same way as Firefox and the IE does.

Thank you again for all the work you did for me (us)!

Greetings
Chriss