0

I am trying to hide an image in a script pre-loading on the page.

Below script makes images "rain" down the screen onClick. It functions well, but it displays the pre-loaded image itself on the page before the button is clicked. I'm trying to hide the image until the button is pressed.

If anyone has any insight on how to hide the image until the function dispenseMittens() runs, I'd be eternally grateful :)

Thanks!

<script language="javascript">
var pictureSrc = 'mitten.gif'; //the location of the mittens
var pictureWidth = 40;            //the width of the mittens
var pictureHeight = 46;           //the height of the  mittens
var numFlakes = 10;               //the number of  mittens
var downSpeed = 0.01;          
var lrFlakes = 10;         
var EmergencyMittens = false; 

//safety checks. Browsers will hang if this is wrong. If other values are wrong there will just be errors
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
    if( document.layers ) { //releave NS4 bug
        document.write('<layer id="snFlkDiv'+x+'"><img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"></layer>');
    } else {
        document.write('<div style="position:absolute;" id="snFlkDiv'+x+'"><img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"></div>');
    }
}

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
    xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
    do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
    } while( typeof( ycoords[snFlkTemp] ) == 'number' );
    ycoords[snFlkTemp] = x / numFlakes;
}

//now animate
function mittensFall() {
    if( !getRefToDivNest('snFlkDiv0') ) { return; }
    var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
    //find screen settings for all variations. doing this every time allows for resizing and scrolling
    if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
        if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
            if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
    if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
        if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop; scrollWidth = document.body.scrollLeft; } else {
            if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { scrollHeight = document.documentElement.scrollTop; scrollWidth = document.documentElement.scrollLeft; } }
    }
    //move the snowflakes to their new position
    for( var x = 0; x < numFlakes; x++ ) {
        if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
        var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
        if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
        divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
        divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - ( pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * ( Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x] ) ) ) ) + scrollWidth ) + oPix;
        ycoords[x] += downSpeed;
    }
}

//DHTML handlers
function getRefToDivNest(divName) {
    if( document.layers ) { return document.layers[divName]; } //NS4
    if( document[divName] ) { return document[divName]; } //NS4 also
    if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
    if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
    return false;
}


function dispenseMittens() {
if (EmergencyMittens) {
 window.clearInterval(EmergencyMittens);

} else {
EmergencyMittens = window.setInterval('mittensFall();',100);
}
}
</script>
1
  • Mittens! =D Best function name ever. Commented Nov 15, 2012 at 22:58

1 Answer 1

2

Why not just set the style of the image to display: 'none' until the button is clicked, whereupon you can set the style back to display: 'inline-block' before the rain commences?

Sign up to request clarification or add additional context in comments.

4 Comments

I've tried doing that, but I can't seem to get it to work. I'm guessing I'm just coding it wrong, but when I set the display it just hides all of the images (even onClick)
Where in your code have you tried it? If you initially set the snFlkDiv to display: 'none' and perhaps change it back at the top of dispenseMittens, does that work?
Well, here is what I have so far. I'm a bit embarrassed at my current knowledge of js. for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug document.write('<layer id="snFlkDiv'+x+'" style="display:none;"><img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"></layer>'); } else { document.write('<div style="position:absolute;" id="snFlkDiv'+x+'"><img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"></div>'); } } bottom: if (EmergencyMittens) { display: 'inline-block'
Is that it? Something seems to have been cut off. Perhaps a JSFiddle?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.