SMF For Free Support Forum
Signup For Free Forum
October 24, 2014, 11:04:33 am *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News: Welcome to SMF For Free. The best free SMF Host
 
   Home   Help Search Arcade Gallery Login Register Chat  

Pages: [1] 2 3
  Print  
Author Topic: [Code] Pictures Falling Down the Page  (Read 10497 times)
0 Members and 1 Guest are viewing this topic.
Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« on: November 14, 2006, 05:50:59 pm »

This code will have a picture float it's way down the page then disappear. You can configure any image to fall, set the amount of time for the pictures to fall and set the number of pictures to fall (I'm not going to bother with the pageheight part, since I barely understand it myself. But oyu guys can fiddle with it. It's pretty self explanitory. How far the pictures are to fall)

Where they fall is completely random.
I kinda "stole" this code from Dynamic Drive but I thought I'd share it with you all. So give your thanks to the make of the code and Dynamic Drive.
Please leave in the part of that code that gives credit to the maker.

Here's the code. It is currently configured to have snow fall down the page, 7 flakes for 10 seconds.
Code:
<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
******************************************/
 
  //Configure below to change URL path to the snow image
  var snowsrc="http://i18.photobucket.com/albums/b135/crasyandconfused/snow.gif"
  // Configure below to change number of snow to render
  var no = 7;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 10;
  // 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>

Change the parts in bold in this part

//Configure below to change URL path to the snow image
  var snowsrc="http://i18.photobucket.com/albums/b135/crasyandconfused/snow.gif"
  // Configure below to change number of snow to render
  var no = 7;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 10;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

They configure the image, the number of images and time to appear respectively.

If you want the time to infinite set the number to 0.


Here's a second option for different snowflakes. The instructions and code are right on the page
http://www.rainbow.arch.scriptmania.com/scripts/bg/snow_fall.html

« Last Edit: August 27, 2007, 09:07:42 pm by simply sibyl » Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #1 on: November 30, 2006, 03:33:18 pm »

Ok cant get it working! I must be doing something really stupid wrong! All the snowflakes are gathered in one corner and not moving1!  Grin ahh i cant help but laugh!!

PS this is the code Sibyl found.

 Angry
Logged

Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« Reply #2 on: November 30, 2006, 05:31:50 pm »

My snowflakes appear to be working. You stuck the code in the footer right?
Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #3 on: December 01, 2006, 12:54:18 pm »

nope still wont work, im not sure what to put into:

Code:
// 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;
Logged

Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« Reply #4 on: December 01, 2006, 01:05:38 pm »

You don't need to put anything into it...it's fine the way it is. All you need to do is change the URL of the snowflakes.
Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #5 on: December 01, 2006, 01:06:50 pm »

erm, well it isnt working then  Sad All i did was put in the urls for the pics...im lost now?! Will i copy and paste the code here for you to see?
Logged

Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« Reply #6 on: December 01, 2006, 01:27:30 pm »

Sure, go ahead. Smiley
Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #7 on: December 01, 2006, 01:30:54 pm »

here it is, please tell me whats wrong as its doing my head in!!!

Code:
<!--Simply copy and paste into <BODY> 
     Just above the </BODY> tag. -->

<SCRIPT type="text/javascript">
/*
Snow Fall Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/
 
//Pre-loads your image/s below
//Configure below - change URL path to the snow image

grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake1.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake2.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake3.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake4.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake5.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake6.gif"

//Smoothness depends on image file size,
//the smaller the size the more you can use!

// 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>
<p><font face="arial" size="-2">Free JavaScript from </font><br><font face="arial, helvetica" size="-2"><a href="http://rainbow.arch.scriptmania.com/scripts/">Rainbow Arch</a></font></p>

Logged

Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« Reply #8 on: December 01, 2006, 01:32:23 pm »

It works for me when I post it on my test forum.
There's nothing wrong with the code.

Try this for me...switch to the default theme. See if that changes the results.
Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #9 on: December 01, 2006, 01:38:15 pm »

strange, that didnt work! ah crap i really wanted that one too!  Angry So i guess it isnt going to work? I kept the code on my forum if u want a look. Its the top feft hand corner.
Logged

Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« Reply #10 on: December 01, 2006, 01:45:07 pm »

Would you be surprised if I told you that the code is working?
Heh heh. Seriously though...the code seems to be fine.

I bet it's just taking a while for those images to load. So until they do the code just kinda sticks them up there.  Wink
Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #11 on: December 01, 2006, 01:47:38 pm »

Hmmm i get what you mean, but the snowflakes have never moved from there, dunno whats up with them! Will just use your code  Smiley

If anyone else is using this and havin the same problems, can you let me know? espically if you have fixed it  Smiley
« Last Edit: December 01, 2006, 01:52:03 pm by chiquitita » Logged

chiquitita
SMF For Free Sr. Member
*
Offline Offline

Posts: 401



View Profile WWW
Total Badges: 18
Badges: (View All)
Topic Starter Combination Level 4 Level 3 Level 2
« Reply #12 on: December 01, 2006, 02:01:17 pm »

eugh this is doing my head in!!!  Cry
Logged

Crasy
Global Moderator
*
Offline Offline

Posts: 3960


Semi-Retired ;)


View Profile
Total Badges: 29
Badges: (View All)
Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
« Reply #13 on: December 01, 2006, 02:08:23 pm »

The snowflakes worked on my computer. Like they moved and everything.
It just took an extra second before they did.
Logged

Did my answer help you? Want to help out hosting costs?


Every donation counts.
simply sibyl
Helpers
*
Offline Offline

Posts: 14347


On hiatus


View Profile WWW
Total Badges: 31
Badges: (View All)
Level 6 Poll Voter Webmaster Arcade Highscore Windows User
« Reply #14 on: December 01, 2006, 02:08:39 pm »

chiquita.. i just went to your site
they are working for me  
Logged


Pages: [1] 2 3
  Print  
 
Jump to:  



Powered by SMF 1.1.20 | SMF © 2013, Simple Machines