0

I am using a javascript for falling images. (1) I want the images to cover the whole page, but they are only displaying in the header area. I don't know what portion to change to make it cover the whole page. It's a wordpress site, so maybe that has something to do with it? I put the call to the script in the head section. This is the script: 

var image="http://abyssinianguineapigtips.com/wp-content/uploads/2014/11/onepoop.png";  //Image path should be given here
var no = 15; // No of images should fall
var time = 0; // Configure whether image should disappear after x seconds (0=never):
var speed = 10; // Fix how fast the image should fall
var i, dwidth = 900, dheight =500; 
var nht = dheight;
var toppos = 0;

if(document.all){
    var ie4up = 1;
}else{
    var ie4up = 0;
}

if(document.getElementById && !document.all){
    var ns6up = 1;
}else{
    var ns6up = 0;
}

function getScrollXY() {
  var scrOfX = 10, scrOfY = 10;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY =window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement &&
      ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
   scrOfY = document.documentElement.scrollTop;
   scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

var timer;

function ranrot()
{

var a = getScrollXY()
if(timer)
{
    clearTimeout(timer);
}
toppos = a[1];
dheight = nht+a[1];
//alert(dheight);

timer = setTimeout('ranrot()',2000);
}

ranrot();

function iecompattest()
{
    if(document.compatMode && document.compatMode!="BackCompat")
    {
        return document.documentElement;
    }else{
        return document.body;
    }

}
if (ns6up) {
    dwidth = window.innerWidth;
    dheight = window.innerHeight;
} 
else if (ie4up) {
    dwidth = iecompattest().clientWidth;
    dheight = iecompattest().clientHeight;
}

nht = dheight;

var cv = new Array();
var px = new Array();       //position variables
var py = new Array();      //position variables
var am = new Array();     //amplitude variables
var sx = new Array();    //step variables
var sy = new Array();   //step variables

for (i = 0; i < no; ++ i) {  
    cv[i] = 0;
    px[i] = Math.random()*(dwidth-100);  // set position variables
    py[i] = Math.random()*dheight;     // set position variables
    am[i] = Math.random()*20;         // set amplitude variables
    sx[i] = 0.02 + Math.random()/10;  // set step variables
    sy[i] = 0.7 + Math.random();    // set step variables
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;LEFT: 15px;\"><img src='"+image+"' border=\"0\"><\/div>");
}

function animation() {  // animation function
    for (i = 0; i < no; ++ i) {  // iterate for every dot
        py[i] += sy[i];
            if (py[i] > dheight-50) {
                px[i] = Math.random()*(dwidth-am[i]-100);
                py[i] = toppos;
                sx[i] = 0.02 + Math.random()/10;
                sy[i] = 0.7 + Math.random();
            }
            cv[i] += sx[i];
            document.getElementById("dot"+i).style.top=py[i]+"px";
            document.getElementById("dot"+i).style.left=px[i] + am[i]*Math.sin(cv[i])+"px";  
        }
        atime=setTimeout("animation()", speed);

}

function hideimage(){
    if (window.atime) clearTimeout(atime)
        for (i=0; i<no; i++) 
            document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
animation();
if (time>0)
    setTimeout("hideimage()", time*1000)
}
animation();

/*   Free Script provided by HIOXINDIA            */
/*   visit us at http://www.hscripts.com     */
/*   This is a copyright product of hioxindia.com */

The page is here.

My second question is the best way to stop the script from executing when someone clicks on the stop sign image. I've read 10 different answers to similar questions here on stackoverflow. So my thought is to make it happen by using:

<img src="stop.png" onclick="myEventHandler(event);" />

and I add:

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}'

to the js file. (I got that from here)

Is that the best way to make it stop with an onclick?

Community
  • 1
  • 1
Michele
  • 121
  • 9

1 Answers1

0

This was a Z-index problem/ Changing 

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;LEFT: 15px;\"><img src='"+image+"' border=\"0\"><\/div>");
}

to

document.write("<div class=\"img-object\" id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ (i + 1000) +"; VISIBILITY: visible; TOP: 15px;LEFT: 15px;\"><img src='"+image+"' border=\"0\"><\/div>");
}

made it cover the whole page.

And to stop the animation when clicking on an image, this function works: (html): 

<img src="stopsign.png" onclick="stopAnimation();" />

and the function:

function stopAnimation() {
    if (window.atime) {clearTimeout(atime);}
    jQuery('.img-object').hide();
}
Michele
  • 121
  • 9