Results 1 to 10 of 10

Thread: Need timeout help

  1. #1
    Join Date
    May 2007
    Posts
    99
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Need timeout help

    Hi everyone! Just a quick question, in this script where some balloons float up, I want the effect on the screen only for a set time like a minute. Then I want it to go away. I notice in the script there is a "timeout" word in 2 places, but I just don't know what to change to make it time out after a minute. Can you help?

    To see how it actually renders you can look at:
    http://rainbow.arch.scriptmania.com/.../float_up.html

    And here is the script:
    Code:
    <!--Copy and paste into your HTML just above the close </BODY> tag. -->
    
    <script language="JavaScript1.2">
    <!-- Begin
    /*
    Float Up Drifter - JavaScript
    Visit www.rainbow.arch.scriptmania.com/scripts/index.html
      for this script and many more
    */
        // Configure below - change number of images to render
    var no = 8; 
        // Configure speed below
    var speed = 20;   // The smaller the number, the faster the movement
    
    var floatr = new Array();
       //  Your image location
    floatr[0] = "balloon0.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[4] = "balloon4.gif"
    floatr[5] = "balloon5.gif"
    floatr[6] = "balloon6.gif"
    floatr[7] = "balloon7.gif"
    
    
    var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
    var ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    var dx, xp, yp;    // coordinate and position variables
    var am, stx, sty;  // amplitude and step variables
    var i, doc_width = 800, doc_height = 1800;
    
    if (ns4up||ns6up) {
            doc_width = self.innerWidth;
            doc_height = self.innerHeight;
    } else if (ie4up) {
            doc_width = document.body.clientWidth;
            doc_height = document.body.clientHeight;
    }
    
    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();
    j = 0;
    
    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 (ns4up) {                      // set layers
                    if (i == 0) {
                            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" 
    
    border=\"0\"></layer>");
                    } else {
                            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" 
    
    border=\"0\"></layer>");
                    }        } else if (ie4up||ns6up) {                if (i == 0) 
    {
                            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 
    
    15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
                    } else {
                            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 
    
    15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
                    }
            }
            if (j == (floatr.length-1)) { j = 0; } else { j += 1; }
    }
    
    function floatrNS() {  // Netscape main animation function
            for (i = 0; i < no; ++ i) {  // iterate for every dot
                    yp[i] -= sty[i];                if (yp[i] < -50) {
                            xp[i] = Math.random()*(doc_width-am[i]-30);
                            yp[i] = doc_height;
                            stx[i] = 0.02 + Math.random()/10;
                            sty[i] = 0.7 + Math.random();
                            doc_width = self.innerWidth;
                            doc_height = self.innerHeight;                }
                    dx[i] += stx[i];
                    document.layers["dot"+i].top = yp[i]+pageYOffset;
                    document.layers["dot"+i].left = xp[i] + 
    am[i]*Math.sin(dx[i]);
            }
            setTimeout("floatrNS()", speed);
    }
    
    function floatrIE_NS6() {  // IE main animation function
            for (i = 0; i < no; ++ i) {  // iterate for every dot
                    yp[i] -= sty[i];
                    if (yp[i] < -50) {
                            xp[i] = Math.random()*(doc_width-am[i]-30);
                            yp[i] = doc_height;
                            stx[i] = 0.02 + Math.random()/10;
                            sty[i] = 0.7 + Math.random();
                            doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
                            doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
                    }
                    dx[i] += stx[i];
                    if (ie4up){
                    document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
                    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
                    }
                    else if (ns6up){
                    document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
                    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
                    }
            }
            setTimeout("floatrIE_NS6()", speed);
    }
    
    if (ns4up) {
            floatrNS();
    } else if (ie4up||ns6up) {
            floatrIE_NS6();
    }
    // End -->
    </script>
    Last edited by Snookerman; 06-05-2009 at 07:31 AM.

  2. #2
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    I've done something like this recently on another function, the setTimeout's are only there to control the speed of the floating balloons.

    To set a time limit for how long this function will work you need to set another variable.

    I have done that in the following code, I haven't been able to test it but the principle is correct. I have not made any changes to clear the balloons from the screen.

    Code:
     <!--Copy and paste into your HTML just above the close </BODY> tag. -->
    
    <script language="JavaScript1.2">
    <!-- Begin
    /*
    Float Up Drifter - JavaScript
    Visit www.rainbow.arch.scriptmania.com/scripts/index.html
      for this script and many more
    */
        // Configure below - change number of images to render
    var no = 8; 
        // Configure speed below
    var speed = 20;   // The smaller the number, the faster the movement
    var timelimit=0;	//*************** set a timelimit variable *************************
    var floatr = new Array();
       //  Your image location
    floatr[0] = "balloon0.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[4] = "balloon4.gif"
    floatr[5] = "balloon5.gif"
    floatr[6] = "balloon6.gif"
    floatr[7] = "balloon7.gif"
    
    
    var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
    var ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    var dx, xp, yp;    // coordinate and position variables
    var am, stx, sty;  // amplitude and step variables
    var i, doc_width = 800, doc_height = 1800;
    
    if (ns4up||ns6up) {
            doc_width = self.innerWidth;
            doc_height = self.innerHeight;
    } else if (ie4up) {
            doc_width = document.body.clientWidth;
            doc_height = document.body.clientHeight;
    }
    
    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();
    j = 0;
    
    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 (ns4up) {                      // set layers
                    if (i == 0) {
                            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" border=\"0\"></layer>");
                    } else {
                            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" border=\"0\"></layer>");
                    }        } else if (ie4up||ns6up) {                if (i == 0) 
    {
                            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
                    } else {
                            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
                    }
            }
            if (j == (floatr.length-1)) { j = 0; } else { j += 1; }
    }
    
    function floatrNS() {  // Netscape main animation function
            for (i = 0; i < no; ++ i) {  // iterate for every dot
                    yp[i] -= sty[i];                if (yp[i] < -50) {
                            xp[i] = Math.random()*(doc_width-am[i]-30);
                            yp[i] = doc_height;
                            stx[i] = 0.02 + Math.random()/10;
                            sty[i] = 0.7 + Math.random();
                            doc_width = self.innerWidth;
                            doc_height = self.innerHeight;                }
                    dx[i] += stx[i];
                    document.layers["dot"+i].top = yp[i]+pageYOffset;
                    document.layers["dot"+i].left = xp[i] + 
    am[i]*Math.sin(dx[i]);
            }
    		timelimit++;    // increment the timelimit variable for NS
            setTimeout("floatrNS()", speed);
    }
    
    function floatrIE_NS6() {  // IE main animation function
            for (i = 0; i < no; ++ i) {  // iterate for every dot
                    yp[i] -= sty[i];
                    if (yp[i] < -50) {
                            xp[i] = Math.random()*(doc_width-am[i]-30);
                            yp[i] = doc_height;
                            stx[i] = 0.02 + Math.random()/10;
                            sty[i] = 0.7 + Math.random();
                            doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
                            doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
                    }
                    dx[i] += stx[i];
                    if (ie4up){
                    document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
                    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
                    }
                    else if (ns6up){
                    document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
                    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
                    }
            }
    		timelimit++;               // increment the timelimit variable for IE
            setTimeout("floatrIE_NS6()", speed);
    }
    
    if (timelimit<60000){ // only perform the float if the count is less than the limit, the smaller this number the shorter the time
    	if (ns4up) {
    			floatrNS();
    	} else if (ie4up||ns6up) {
    			floatrIE_NS6();
    	}
    }
    // End -->
    </script>
    I am incrementing the timelimit variable by 1 each time the float operation is performed. After that I have set the float function to only operate when the timelimit variable is below a certain number. Change this number to control how long the float operation will be carried out, the smaller the number the shorter the time.

  3. The Following User Says Thank You to forum_amnesiac For This Useful Post:

    nycguurl (06-02-2009)

  4. #3
    Join Date
    May 2007
    Posts
    99
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much for the assistance! I tried what you said... I played with it changing the timelimit variable to everything from "1", "10", "1000", "60001", "59999"... you name it. Which number would represent 1 second? Also, no matter what number I picked the balloons kept floating. Well, except for the 60001. They didn't float at all because that was over the limit. How can I set it to 1 second? I can adjust from there.

  5. #4
    Join Date
    May 2007
    Posts
    99
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Oh, reading your answer back again I think you meant to set a variable for number of times the float is performed. So I tried "1", to make it go once. But the balloons are still floating. I am in IE. Did I mess up?

  6. #5
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    Try changing the 60000 to 5000, and then see how long it takes to stop.

    The problem is that the function has a timeout, which is in milliseconds, so that affects the timing

    I suggest you change the number, currently 60000, to a lower number, then see how long this takes to stop, change it again, and so on, until you are happy with the time limit
    Last edited by forum_amnesiac; 06-02-2009 at 04:33 PM.

  7. #6
    Join Date
    May 2007
    Posts
    99
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Hi. I tried that. But the problem is the balloons never stop. Any ideas?

  8. #7
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    I've tested this and it definitely works, the timelimit variable needed to be inside each function, ie floatrIE_NS6() and floatrNS().

    Code:
    <script language="JavaScript1.2">
    <!-- Begin
    /*
    Float Up Drifter - JavaScript
    Visit www.rainbow.arch.scriptmania.com/scripts/index.html
      for this script and many more
    */
        // Configure below - change number of images to render
    var no = 8; 
        // Configure speed below
    var speed = 20;   // The smaller the number, the faster the movement
    var timelimit=0;	//*************** set a timelimit variable *************************
    var floatr = new Array();
       //  Your image location
    floatr[0] = "balloon0.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[4] = "balloon4.gif"
    floatr[5] = "balloon5.gif"
    floatr[6] = "balloon6.gif"
    floatr[7] = "balloon7.gif"
    
    var ie4up = "";
    var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
    ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    var dx, xp, yp;    // coordinate and position variables
    var am, stx, sty;  // amplitude and step variables
    var i, doc_width = 800, doc_height = 1800;
    
    if (ns4up||ns6up) {
            doc_width = self.innerWidth;
            doc_height = self.innerHeight;
    } else if (ie4up) {
            doc_width = document.body.clientWidth;
            doc_height = document.body.clientHeight;
    }
    
    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();
    j = 0;
    
    	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 (ns4up) {                      // set layers
              	if (i == 0) {
                            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" border=\"0\"></layer>");
                } else {
                            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" border=\"0\"></layer>");
                }        
    		} else if (ie4up||ns6up) {                
    			if (i == 0){
                            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
               	} else {
                            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
              	}
            }
            if (j == (floatr.length-1)) { j = 0; } else { j += 1; }
    	}
    
    
    function floatrNS() {  // Netscape main animation function
    if (timelimit<300){ // only perform the float if the count is less than the limit, the smaller this number the shorter the time
            for (i = 0; i < no; ++ i) {  // iterate for every dot
                    yp[i] -= sty[i];                if (yp[i] < -50) {
                            xp[i] = Math.random()*(doc_width-am[i]-30);
                            yp[i] = doc_height;
                            stx[i] = 0.02 + Math.random()/10;
                            sty[i] = 0.7 + Math.random();
                            doc_width = self.innerWidth;
                            doc_height = self.innerHeight;                }
                    dx[i] += stx[i];
                    document.layers["dot"+i].top = yp[i]+pageYOffset;
                    document.layers["dot"+i].left = xp[i] + 
    am[i]*Math.sin(dx[i]);
            }
    		timelimit++;    // increment the timelimit variable for NS
            setTimeout("floatrNS()", speed);
    }else{ 
    	for (i = 0; i < no; ++ i) {
      	document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"hide\"><img src=\"transparent.gif\" border=\"0\"></layer>");
    	}
    }
    }
    
    function floatrIE_NS6() {  // IE main animation function
    	if (timelimit<300){ // only perform the float if the count is less than the limit, the smaller this number the shorter the time
            for (i = 0; i < no; ++ i) {  // iterate for every dot
                    yp[i] -= sty[i];
                    if (yp[i] < -50) {
                            xp[i] = Math.random()*(doc_width-am[i]-30);
                            yp[i] = doc_height;
                            stx[i] = 0.02 + Math.random()/10;
                            sty[i] = 0.7 + Math.random();
                            doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
                            doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
                    }
                    dx[i] += stx[i];
                    if (ie4up){
                    document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
                    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
                    }
                    else if (ns6up){
                    document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
                    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
                    }
            }
    		timelimit++;               // increment the timelimit variable for IE
            setTimeout("floatrIE_NS6()", speed);
    	} else {
    		for (i = 0; i < no; ++ i) {
    		document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: hidden; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"transparent.gif\" border=\"0\"></div>");
    		}
    	}
    }
    
    	if (ns4up) {
    			floatrNS();
    	} else if (ie4up||ns6up) {
    			floatrIE_NS6();
    	}
    // End -->
    </script>
    If you create a small transparent image, call it transparent.gif, the balloons will clear from the screen when the timelimit has been reached

  9. The Following User Says Thank You to forum_amnesiac For This Useful Post:

    nycguurl (06-04-2009)

  10. #8
    Join Date
    May 2007
    Posts
    99
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Wow, thank you for this answer. I'm a little lost for where to put the numbers. I decided I want the balloons to stop after the float affect makes its way up one screen length. I will ask my friend where to put the numbers to make that happen.

  11. #9
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    This is the line to change, the 300 is what I have set the time limit to be.

    You can alter this number to any other number you want, remember, the larger the number the longer the balloons will float.

    This line appears twice in the code, change the number in both places

    Code:
    if (timelimit<300){ // only perform the float if the count is less than the limit, the smaller this number the shorter the time

  12. The Following User Says Thank You to forum_amnesiac For This Useful Post:

    nycguurl (06-04-2009)

  13. #10
    Join Date
    May 2007
    Posts
    99
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    I can't believe it worked! Thank you SO MUCH!!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •