PDA

View Full Version : Falling images code modification



julianbremann
07-14-2011, 02:58 AM
Hi all,

I have this variety of falling images through the browser screen code and am trying to modify it but am not successful so can you please try to help?

What I want is two things that would be different from what it does now:

1. When the falling images (leaves) reach either the right or bottom side of the browser a scrollbar appears and starts jumping up and down, I want the images just to disappear at the user-set browser size without the scrollbars to show up, is that possible and how?

2. Can the falling images (leaves) be links? In other words, can they be clicked and take the user to another page?

Thanks!!

Heres' the code:

//////////////////

<SCRIPT type="text/javascript">
/*
Thank you!! :)
*/



grphcs=new Array(2)
Image0=new Image();
Image0.src=grphcs[0]="images/leaf1.png";
Image1=new Image();
Image1.src=grphcs[1]="images/leaf2.png"




// How many?
Amount=4;

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=200 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>');
}
Hwin=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WWin=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*Hwin);
Xpos[i] = Math.round(Math.random()*WWin);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var Hwin=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WWin=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;


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] > Hwin){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WWin);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i];
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WWin,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i];
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i];
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',120);
}
window.onload=fall
//-->

</SCRIPT>

jscheuer1
07-14-2011, 04:42 AM
That's:

http://www.dynamicdrive.com/dynamicindex3/leaves.htm

Please reinstate the credit.

It doesn't appear to have the first problem. For the second thing, you can put a link in this line:


document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');

like:


document.write('<a href="http://www.google.com/"><img id="si'+i+'" src="'+rndPic+'" style="border-width:0;position:absolute;top:0px;left:0px"></a>');

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

julianbremann
07-14-2011, 08:36 AM
Hey John,
Thanks a lot for the reply. I'll restore this person's credit although I got it from someone else.
The first problem is present even in the link you sent me, the original code. You can see that when you scroll all the way to the bottom and wait when a leaf reaches it. It is when the scroll bar starts to expand and contract. Here's what's happening clearly demonstrated on my site under development: http://karmacats.tv/dev/testi.html

About the second problem, the inserted link tag works (thanks!) but I meant is that I'd like to have every image (in my site's example, the falling bouquets) go to a different URL rather than everyone go to the same one..
Thanks a lot,
Julian

julianbremann
07-14-2011, 08:41 AM
Just to be more clear, I have to different images, bouquet.jpg and bouquet2.jpg, falling, and would like to make bouquet.jpg go to one URL and bouquet2.jpg go to another. Alternatively, I could have more images "falling" and wonder if it'd be possible to make them each link to something different.
Thanks again!

jscheuer1
07-14-2011, 04:08 PM
Try this updated version:

http://home.comcast.net/~jscheuer1/side/bubble_leaves_bidirect.htm

Use your browser's 'view source' to get the code.

To prevent the dancing scrollbars with such large images, you will probably have to increase 60 (two places) in this line:


Ypos[i]=(Ypos[i] > WinHeight&&dir==1)? -60 : (Ypos[i] < 0 && dir==-1)? WinHeight+60 : Ypos[i];

Use the height of your largest image.

I know the demo has them going up, but you may make them going down in the configuration:


var dir=-1 // Set 'falling' direction (1 for down, -1 for up)

As for linking specific images, change this section:


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">');
}

to:


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];
rndLink=hrefs[P];
document.write('<a href="'+rndLink'+"><img id="si'+i+'" src="'+rndPic+'" style="border-width:0;position:absolute;top:0px;left:0px"></a>');
}

And where you have:


grphcs=new Array(2)
Image0=new Image();
Image0.src=grphcs[0]="images/buquet.png";
Image1=new Image();
Image1.src=grphcs[1]="images/buquet2.png"

Replace that with:


grphcs = [];
hrefs = [];
Image0=new Image();
Image0.src=grphcs[0]="images/buquet.png";
hrefs[0] = 'whatever.htm';
Image1=new Image();
Image1.src=grphcs[1]="images/buquet2.png"
hrefs[1] = 'someother.htm';

If they're in another folder, you may use the relative or absolute path for the hrefs. If they're on another site, use the absolute path.

julianbremann
07-14-2011, 06:54 PM
Hey John,

The links code works fine, still wasn't able to get rid of the dancing scrolls though even when I increased the 60 to 213 (height of my biggest image) in the line:

Ypos[i]=(Ypos[i] > WinHeight&&dir==1)? -213 : (Ypos[i] < 0 && dir==-1)? WinHeight+213 : Ypos[i];

Thanks, thanks!
----------------
http://karmacats.tv/dev/testi.html

julianbremann
07-14-2011, 07:45 PM
Also, is there something I can add to make the links to open in a new window rather than replacing the url i'm on?
Thank yoooooouuuuu...

jscheuer1
07-15-2011, 01:14 AM
Works OK in IE, but I see what you mean in others. I'll look into it and get back to you. About opening in a new window, you can put:


document.write('<a target="_blank" href="'+rndLink'+"><img id="si'+i+'" src="'+rn . . .

That will open a new window (or tab, that's up to the browser) for each link clicked. If you use _new instead of _blank, then it will reuse the new window or tab - like if you click once and get a new window, and click again it will put that link into the same new window.

jscheuer1
07-15-2011, 06:05 AM
After looking at that script, I kept thinking that I couldn't believe I left something so messy as my final effort on that. I hadn't. Try this out:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>rew</title>
<META name="description" content="ref">
<META name="keywords" content="ref">
</head>
<body background="images/wedding.jpg" topmargin="120px">
<script type="text/javascript">

/*
* Falling/Rising - by John Davenport Scheuer - aka:jscheuer1
* Very freely adapted from - Autumn leaves - by Kurt Grigg (kurt.grigg@virgin.net)
* Visit http://www.dynamicdrive.com for TOS.
* Modified by jscheuer1 in http://www.dynamicdrive.com/forums
* This credit must remain for legal use.
*/

fall.dir=-1; // Set 'falling' direction (1 for down, -1 for up).
fall.speed=60; // 20 to whatever (70 is pretty slow), higher numbers are slower
fall.amount=8; // Set max number of images to fall at once, the smaller the images, the higher this can be.
fall.sway=10; // Set amount of left/right swaying of objects (default=10), higher numbers produce more sway.
fall.limit=0; // Set number of fallings/risings until effect should end, use 0 for no end.
fall.target='_new'; // Set target for links
fall.click="return true;" //set onclick function for linked images

// Pre-load your image(s) below!
if(document.images){ // <-- Do Not Edit or remove this line!!!
fall.grphcs=[];
fall.hrefs=[];
fall.image0=new Image();
fall.image0.src=fall.grphcs[0]="images/buquet.png";
fall.hrefs[0] = 'http://msn.com';
fall.image1=new Image();
fall.image1.src=fall.grphcs[1]="images/buquet2.png";
fall.hrefs[1] = 'http://google.com';

//////////////// Stop Editing //////////////
}

fall.prepare=function(){
fall.di=document.getElementById;
fall.da=document.all;
if (!document.images||(!fall.di&&!fall.da))
return;
fall.iebod=function(){
return (document.compatMode && document.compatMode.indexOf('CSS')!=-1)? document.documentElement : document.body;
}
fall.get=function(id){return fall.di? document.getElementById(id) : fall.da[id];};
fall.t1=fall.iebod().scrollWidth;
document.write('<a href="'+fall.hrefs[0]+'" target="'+fall.target+'" onclick="'+fall.click+'"><img id="fall_test" src="'+fall.grphcs[0]+'" style="border-width:0;position:fixed!important;position:absolute;top:-2000px;left:80000px"></a>');
fall.t2=fall.iebod().scrollWidth;
if(fall.t2>fall.t1)
fall.overflows=true;
fall.get('fall_test').style.left='-2000px';
fall.zero=(fall.di&&fall.get('fall_test').style.position=='fixed')||(document.defaultView&&document.defaultView.getComputedStyle(fall.get('fall_test'), null).getPropertyValue('position')=='fixed');
if(fall.get('fall_test').parentNode&&document.createElement)
fall.get('fall_test').parentNode.removeChild(fall.get('fall_test'));

fall.Ypos=new Array();
fall.Xpos=new Array();
fall.Speed=new Array();
fall.Step=new Array();
fall.Cstep=new Array();

fall.speed=Math.max(20, fall.speed);
fall.set_ims();
}
fall.set_ims=function(){
if(fall.overflows||!fall.zero)
document.write('<div id="fall0" style="position:fixed!important;overflow:hidden;position:absolute;">');
for (fall.i = 0; fall.i < fall.amount; fall.i++){
fall.P=Math.floor(Math.random()*fall.grphcs.length);
document.write('<a href="'+fall.hrefs[fall.P]+'" target="'+fall.target+'" onclick="'+fall.click+'"><img alt="" id="si'+fall.i+'" onload="fall.fall_start();" src="'+fall.grphcs[fall.P]+'" style="border-width:0;position:fixed!important;position:absolute;top:-2000px;left:-2000px"></a>');
}
if(fall.overflows||!fall.zero)
document.write('<\/div>');

fall.WinHeight=function(){return window.innerHeight?window.innerHeight:fall.iebod().clientHeight;};
fall.WinWidth=function(){
if(window.innerWidth&&fall.iebod().clientWidth)
return Math.min(window.innerWidth,fall.iebod().clientWidth);
return window.innerWidth?window.innerWidth:fall.iebod().clientWidth;
}
for (fall.i=0; fall.i < fall.amount; fall.i++){
fall.Ypos[fall.i] = Math.round(Math.random()*fall.WinHeight());
fall.Xpos[fall.i] = Math.round(Math.random()*fall.WinWidth());
fall.Speed[fall.i]= (Math.random()*5+3)*fall.dir;
fall.Cstep[fall.i]=0;
fall.Step[fall.i]=Math.random()*0.1+0.05;
}
}

fall.falls=0;
function fall(){
var fac, cont=0, s='style', d='display', f=fall.dir, w=fall.WinWidth, h=fall.WinHeight;
var hscrll=fall.zero?0:typeof window.pageYOffset=='number'?window.pageYOffset:fall.iebod().scrollTop?fall.iebod().scrollTop:0;
var wscrll=fall.zero?0:typeof window.pageXOffset=='number'?window.pageXOffset:fall.iebod().scrollLeft?fall.iebod().scrollLeft:0;
for (var i=0; i < fall.amount; i++){
if(fall.overflows||!fall.zero){
var sc = fall.get('fall0');
sc[s].top=hscrll+'px';
sc[s].left=wscrll+'px';
sc[s].width=w()+'px';
sc[s].height=h()+'px';
}
var sy = fall.Speed[i]*Math.sin(90*Math.PI/180);
var sx = fall.Speed[i]*Math.cos(fall.Cstep[i]);
fall.Ypos[i]+=sy;
fall.Xpos[i]+=sx*fall.sway*0.1;
fac=fall.get('si'+i).offsetHeight;
if (fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0){
fall.Xpos[i]=Math.round(Math.random()*w());
fall.Speed[i]=(Math.random()*5+3)*f;
}
if(i==fall.amount-1&&(fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0))
fall.falls++;
fall.Ypos[i]=(fall.Ypos[i] > h()&&f>0)? fac*-1 : (fall.Ypos[i] < fac*-1 && f<0)? h()+fac : fall.Ypos[i];
if(fall.limit&&fall.falls>fall.limit&&((f>0&&fall.Ypos[i]==fac*-1)||(f<0&&fall.Ypos[i]==h()+fac)))
fall.get('si'+i)[s][d]='none';
fall.df=fall.da&&!fall.di||window.opera&&(typeof opera.version=='undefined'||opera.version()<9)? (f<0?fac*2:fac):0;
fall.get('si'+i)[s].left=fall.df? Math.min(fall.Xpos[i], w()-fall.get('si'+i).offsetWidth)+'px' : fall.Xpos[i]+'px';
fall.get('si'+i)[s].top=fall.Ypos[i]-fall.df+'px';
for (var j = 0; j < fall.amount; j++)
if (fall.get('si'+j)[s][d]!='none')
cont=1;
if(!cont){
clearInterval(fall.fall);
if(fall.overflows||!fall.zero)
sc[s][d]='none';
}
fall.Cstep[i]+=fall.Step[i];
}
}
fall.starting=1;
fall.fall_start=function(){
if (fall.started||fall.amount>fall.starting++)
return;
fall.started=true;
fall.fall=setInterval('fall()', fall.speed);
};
fall.prepare();

</script>
<center>

<table width="1200px">
<tr>
<td width="22%"><img src="images/ring2.jpg" width="209" height="202" /></td>
<td width="582px" rowspan="3" background="images/labelmate4.png">
<br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br />

</div> </td>
<td width="29%"></td>
</tr>
<tr>
<td rowspan="2">&nbsp;</td>
<td width="29%" height="153">&nbsp;</td>
</tr>
<tr>
<td height="206">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/ring1.jpg" width="236" height="243" /></td>
</tr>
</table>

</center>

</body>




</html>

julianbremann
07-15-2011, 04:58 PM
I love you.
Thanks so much..