|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
Hey guys, How can I have those cute snow flakes falling over my forum? Already tried a few scripts I found on the internet, but they don't seem to work 
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
take your laptop to a snowstorm and open it up 
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
Like this I added it in my header.php file in the includes folder
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
Roflmao, I like Ians idea better
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
Where did you get the script? Can you send it to me pretty pleeaase?  Ian, if it was snowing out here, I would 
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
in all seriousness the scripts should work fine on your site - how are you setting it up?
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
Here is the script, be sure to add it inside the <body></body> tags and to add the path to your snow image. <script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
function openwindow(){
window.open("autumn_effect.htm","","width=350,height=500")
}
//Configure below to change URL path to the snow image
var snowsrc="http://www.path/to/snow3.gif"
// Configure below to change number of snow to render
var no = 20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
Last edited by gliderdad; 12/18/2007 4:20 PM. Reason: removed tags
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I copied this in the HTML Includes (header) <SCRIPT
type="text/javascript"> /*Script distributed by Hypergurl.com Visit
http://www.hypergurl.com/easyhtml.html for this script and many more */ // This
part preloads images. You can use different images. // Change URL path to the
snow image below grphcs=new Array(6) Image0=new Image(); Image0.src=grphcs[0]="http://www.pinksheep.be/images/snow.gif";
Image1=new Image(); Image1.src=grphcs[1]="http://www.pinksheep.be/images.snow.gif" Image2=new Image();
Image2.src=grphcs[2]="http://www.pinksheep.be/images/snow.gif" Image3=new Image(); Image3.src=grphcs[3]="http://www.pinksheep.be/images/snow.gif"
Image4=new Image(); Image4.src=grphcs[4]="http://www.pinksheep.be/images/snow.gif" Image5=new Image();
Image5.src=grphcs[5]="http://www.pinksheep.be/images/snow.gif" // Configure below - change number
of snow to render Amount=15; Ypos=new Array(); Xpos=new Array(); Speed=new Array();
Step=new Array(); Cstep=new Array(); ns=(document.layers)?1:0; ns6=(document.getElementById&&!document.all)?1:0;
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>"); } } else{
document.write('<div style="position:absolute;top:0px;left:0px"><div
style="position:relative">'); for (i = 0; i < Amount; i++){ var
P=Math.floor(Math.random()*grphcs.length); rndPic=grphcs[P]; document.write('<img
id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
} document.write('</div></div>'); } WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth; for
(i=0; i < Amount; i++){ Ypos[i] = Math.round(Math.random()*WinHeight); Xpos[i]
= Math.round(Math.random()*WinWidth); Speed[i]= Math.random()*5+3; Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05; } function fall(){ var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop; var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(90*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] > WinHeight){ Ypos[i]=-60; Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3; } if (ns){ document.layers['sn'+i].left=Xpos[i]; document.layers['sn'+i].top=Ypos[i]+hscrll;
} else if (ns6){ document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll; } else{ eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll; } Cstep[i]+=Step[i];
} setTimeout('fall()',115); } window.onload=fall //--> </SCRIPT>
Last edited by Gizmo; 12/18/2007 7:45 PM.
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
Did you get the script I sent to work?
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
I would suggest trying gilderdad's script first - if that fails let us know 
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I get falling red crosses now... hilarious 
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
Cool, all you need to do is fix the path to your snow. Find this [color:#FF0000]www.path/to/snow.gif[/color] remove the color tags and make sure your path is right. That was my fault, sorry
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
That's what I did 
|
|
|
|
Joined: Jan 2004
Posts: 2,474 Likes: 3
Pooh-Bah
|
Pooh-Bah
Joined: Jan 2004
Posts: 2,474 Likes: 3 |
What are the color tags for? I removed them and it works for me.
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
I accidentally put them in there for him to see were to change the path to his snow image.
|
|
|
|
Joined: Jan 2004
Posts: 2,474 Likes: 3
Pooh-Bah
|
Pooh-Bah
Joined: Jan 2004
Posts: 2,474 Likes: 3 |
Ah - thought my brain was in neutral (again).
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
Nope, it was my brain roflmao
|
|
|
|
Joined: Jun 2006
Posts: 16,375 Likes: 129
|
Joined: Jun 2006
Posts: 16,375 Likes: 129 |
I get irritated from falling snow... It's a great visual teaser, however, if you try to click on a link, you end up clicking on the snow images and sometimes cannot get to links...
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
i just make it snow in the shoutbox..
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
LOL good idea  .............
|
|
|
|
Joined: Jun 2006
Posts: 16,375 Likes: 129
|
Joined: Jun 2006
Posts: 16,375 Likes: 129 |
I can see people all "theres whitenoise in the shoutbox!"
|
|
|
|
Joined: Jun 2006
Posts: 16,375 Likes: 129
|
Joined: Jun 2006
Posts: 16,375 Likes: 129 |
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
What are you on about now ? 
|
|
|
|
Joined: Jun 2006
Posts: 16,375 Likes: 129
|
Joined: Jun 2006
Posts: 16,375 Likes: 129 |
Who knows at this point...
|
|
|
|
Joined: Nov 2006
Posts: 3,095 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Nov 2006
Posts: 3,095 Likes: 1 |
Just add SNOW to the Gizmo posts 
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
What for a wipeout 
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I accidentally put them in there for him to see were to change the path to his snow image. "her".. not that it matters, it's still snowing red crosses  I adjusted the image attributes, no idea if it would make any difference. Well, it doesn't. More ideas?
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
red x's means your path to your snow image is wrong or the permissions to the image is wrong. The fact that you see the red x's shows the script is working right.
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I checked the path already a zillion times, it's correct. When I type in the path in IE, it shows the snow flake. I've set the attributes to 777 .. 
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
What path do you have in the script?
|
|
|
|
Joined: Jun 2006
Posts: 1,344
veteran
|
veteran
Joined: Jun 2006
Posts: 1,344 |
are you using a relative path?
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I'm using this: var snowsrc="www.pinksheep.be/images/snow.gif"
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
either use http:// at the start or use /images/snow.gif is that is the path.
|
|
|
|
Joined: Jan 2004
Posts: 2,474 Likes: 3
Pooh-Bah
|
Pooh-Bah
Joined: Jan 2004
Posts: 2,474 Likes: 3 |
At the top of the script I have... //Configure below to change URL path to the snow image
var snowsrc="/index/snow.gif" further down I use... document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://mysite.co.uk\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
Thans Gizmo  ......
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
Okay, that did it 
|
|
|
|
Joined: Jun 2006
Posts: 3,839 Likes: 1
Carpal Tunnel
|
Carpal Tunnel
Joined: Jun 2006
Posts: 3,839 Likes: 1 |
That would be down to the script - have you altered the variables at the top?
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I was too impatient, it just took them very long to fall again  What 'disturbs' me is that they start falling in the amount you indicated. Is it possible to have them fall one by one in stead of all 10 (in my case) at the time? It looks very odd this way, as the page is refreshed very often, so most of the time, you just have a row of flakes falling down 
|
|
|
|
Joined: Oct 2007
Posts: 92
journeyman
|
journeyman
Joined: Oct 2007
Posts: 92 |
I found it myself! Thumbs up for me 
|
|
|
0 members (),
1,423
guests, and
122
robots. |
Key:
Admin,
Global Mod,
Mod
|
|
|
|