PDA

View Full Version : Resolved Need timeout help



nycguurl
06-02-2009, 02:16 AM
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? :o

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

And here is the script:

<!--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>

forum_amnesiac
06-02-2009, 05:55 AM
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.


<!--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.

nycguurl
06-02-2009, 03:30 PM
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. :eek: 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. :o

nycguurl
06-02-2009, 03:46 PM
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?

forum_amnesiac
06-02-2009, 04:25 PM
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

nycguurl
06-02-2009, 05:43 PM
Hi. I tried that. But the problem is the balloons never stop. Any ideas? :o

forum_amnesiac
06-03-2009, 01:44 PM
I've tested this and it definitely works, the timelimit variable needed to be inside each function, ie floatrIE_NS6() and floatrNS().


<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

nycguurl
06-04-2009, 08:02 AM
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. :o

forum_amnesiac
06-04-2009, 08:13 AM
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


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

nycguurl
06-04-2009, 10:26 PM
I can't believe it worked! Thank you SO MUCH!!! :o