Advertise Here

Author Topic: [Code] Pictures Falling Down the Page  (Read 13499 times)

0 Members and 1 Guest are viewing this topic.

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
[Code] Pictures Falling Down the Page
« 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: [Select]
<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 »
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« 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!  ;D ahh i cant help but laugh!!

PS this is the code Sibyl found.

 >:(

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« Reply #2 on: November 30, 2006, 05:31:50 pm »
My snowflakes appear to be working. You stuck the code in the footer right?
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« Reply #3 on: December 01, 2006, 12:54:18 pm »
nope still wont work, im not sure what to put into:

Code: [Select]
// 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;

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« 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.
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« Reply #5 on: December 01, 2006, 01:06:50 pm »
erm, well it isnt working then  :( 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?

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« Reply #6 on: December 01, 2006, 01:27:30 pm »
Sure, go ahead. :)
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« 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: [Select]
<!--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>


Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« 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.
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« Reply #9 on: December 01, 2006, 01:38:15 pm »
strange, that didnt work! ah crap i really wanted that one too!  >:( 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.

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« 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.  ;)
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« 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  :)

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

Offline chiquitita

  • SMF For Free Sr. Member
  • *
  • Posts: 401
    • View Profile
    • ABBA Forum

  • Total Badges: 18
    Badges: (View All)
    Topic Starter Combination Level 4 Level 3 Level 2
Re: Code: Pictures Falling Down the Page
« Reply #12 on: December 01, 2006, 02:01:17 pm »
eugh this is doing my head in!!!  :'(

Offline Crasy

  • Global Moderator
  • *
  • Posts: 3960
  • Semi-Retired ;)
    • View Profile

  • Total Badges: 29
    Badges: (View All)
    Poll Starter Poll Voter Seventh year Anniversary Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« 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.
Did my answer help you? Want to help out hosting costs?


Every donation counts.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: Code: Pictures Falling Down the Page
« Reply #14 on: December 01, 2006, 02:08:39 pm »
chiquita.. i just went to your site
they are working for me  

 

Related Topics

  Subject / Started by Replies Last post
12 Replies
5628 Views
Last post August 02, 2008, 08:16:14 am
by Suki The Saluki
21 Replies
13264 Views
Last post December 13, 2008, 12:51:17 am
by Nixxi
9 Replies
3984 Views
Last post April 29, 2008, 07:14:39 pm
by LaundryLady
4 Replies
1965 Views
Last post August 19, 2009, 04:19:19 pm
by clairebear
3 Replies
1324 Views
Last post January 05, 2010, 08:15:52 pm
by K I L L A