I'm sure it's a simple fix, but I suck at Javasript.
Or if anyone knows of a better version of this sort of starfield background I'd greatly appreciate it. I plan on playing around with the star images to make them look better, but if there's a better more 3D looking on that closer resembles the screensaver that would be what I really want.
I have change the source code then it can be run in IE and FF
PHP Code:
<html>
<script language="JavaScript1.2">
/*modify by gainover*/
function $(id){return document.getElementById(id);}
//3D Starfield - by Mikhail Ansolis, based on Flying planes - by John Ely
//Modified from: Autumn leaves script- by Kurt Grigg (kurt.grigg@virgin.net)
//Visit http://www.dynamicdrive.com for this script
//Pre-load your image below!
//CHANGE 5 to the number of images listed below
grphcs=new Array(5)
//PRELOAD the involved images (extend or contract variables according to # of images used)
Image0=new Image();
Image0.src=grphcs[0]="Star0.gif"
Image1=new Image();
Image1.src=grphcs[1]="Star1.gif"
Image2=new Image();
Image2.src=grphcs[2]="Star2.gif"
Image3=new Image();
Image3.src=grphcs[3]="Star3.gif"
Image4=new Image();
Image4.src=grphcs[4]="Star4.gif"
//SPECIFY number of images to randomly display concurrently from list above. Less the more efficient
Amount=20;
Ypos=new Array();
Xpos=new Array();
Zpos=new Array();
//SpeedX=new Array();
//SpeedY=new Array();
ScrXpos=new Array();
ScrYpos=new Array();
Speed=new Array();
Size=new Array();
Step=new Array();
ns=(document.layers)?1:0;
ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
} //end for
} //end if
else{ //IE
document.write('<div style="position:absolute;top:0;left:0"><div style="position:relative">');
for (i = 0; i < Amount; i++){
document.write('<img id="si'+i+'" src="'+grphcs[Math.round((i+1)*(grphcs.length-1)/Amount)]+'" style="position:absolute;top:0;left:0;">');
}
document.write('</div></div>');
}
//initialize star properties
WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10
Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
}
function fly(){
var WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
var WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns)?window.pageYOffset:document.body.scrollTop;
for (i=0; i < Amount; i++){
Zpos[i]-=Speed[i];
if (ScrXpos[i]>WinWidth || ScrXpos[i]<0 || ScrYpos[i]>WinHeight || ScrYpos[i]<0 || Zpos[i]<=0) { //generate new stars
Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10
Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
}
ScrXpos[i]=Xpos[i]/Zpos[i]*100 + WinWidth/2;
ScrYpos[i]=Ypos[i]/Zpos[i]*100 + WinHeight/2;
if (ns){
document.layers['sn'+i].left=ScrXpos[i];
document.layers['sn'+i].top=ScrYpos[i]+hscrll;
}
else{
$("si"+i).style.left=parseInt(ScrXpos[i]);
$("si"+i).style.top=parseInt(ScrYpos[i]+hscrll);
}
} //end for
setTimeout('fly()',20);
} //end fly
Hi, im working on the site that pathfinder started this for, I have got the script working, it's works perfectly in IE, but it still makes the bottom scroll bar "wig out" when stars fly by the edge, does anyone have any thoughts on how to get it working with these other 2 browsers
with the overflow: hidden; in place, it works fine with all browsers but in IE it makes the whole page unscrollable, where as in FF and opera even though the scroll bars are'nt visible i can still scroll, any thoughts please?
WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Speed[i]=(i+1)*6/Amount+4; //speed range from 4 to 10
Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
In MSIE, if you disable the overflow you can't scroll anymore, but it fixed the problem of the crazy scroll bars in FF.
I think if you can adjust the script so it doesn't allow the stars to go past a certain point in the browser window it would stop the scroll bars in FF without touching the overflow.
Reply With Quote
Originally Posted by gainover
Bookmarks