I'm writing a script with a while loop in it. How can I get it to go slower
so that it doesn't appear to happen all at once--so that it looks
animated--basically. I tried the setTimeout(500) in the last line of the
loop, but that just messes things up. Any help would be appreciated--thanks.
16  9717 
"TheKeith" <no@spam.com> wrote in message
news:6c********************@giganews.com... I'm writing a script with a while loop in it. How can I get it to go
slower so that it doesn't appear to happen all at once--so that it looks
animated--basically. I tried the setTimeout(500) in the last line of the
loop, but that just messes things up. Any help would be
appreciated--thanks.
here is what I'm doing:
<html>
<head>
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox")
var idofbluebox = document.getElementById("bluebox")
var blueboxwidthnum = parseInt(idofbluebox.style.width)
var blueboxheightnum = parseInt(idofbluebox.style.height)
while (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 200 wide and 200 high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
I'm trying to have the box grow slowly so it looks animated. I didn't get
around to the height part yet. BTW, is there a way I can do the height at
the same time as the width? Thanks.
ciao
you cannot slow down a loop: loops are meant to be the faster the better.
use setInterval : see on a manual the documentation for it, should be under
the window object. I mean that now a full description of how setInterval
works printed right here would require maybe 15 minutes. I hope having
pointed to you the method will suffice.
Loops cannot be slow down, not in javaScript and not in other languages.
Also functions like sleep that a few languages have are not meant to make
loops slow, but to postpone the execution of blocks of codes - but that's
server side, like a flush() method say.
ciao
Alberto Vallini
ciao
uhm why not using both? I mean an old way of doing soemthing doesn't age:
the document.images collection is an useful tool: it grants you the option
to loop throughout ALL the available images with an array already arranged.
otherwise you'd have to arrange it yourself, either patching up a collection
by repeatedly calling in document.getElementById('image101') or by
document.getElementsByTagName("A")
the former is highly unpractical, the second is much slower than just using
an object which is already within the built in arrays of a loaded document.
It is not an issue of purist vs moderns: it is that I'm suggesting: use
both - dismissing the name just because they ADDED the id feature doesn't
mean you have to give up the possibility to scan all your images with an
alrerady available collection. Again, name= is NOT deprecated.
Of course, feel free to dismiss my suggestion, but please: it is NOT a
suggestion of "old school" vs "new school": it is the suggestion that
everybody with javascript expereince would be likely to lend to you.
Of course, eventually do as you prefer. yet using two weapons instead than
one is better - we have not given up the rifle because we have the scuds.
ciao
Alberto http://www.unitedscripters.com/
"TheKeith" <no@spam.com> ha scritto nel messaggio
news:X9********************@giganews.com...
"TheKeith" <no@spam.com> wrote in message
news:6c********************@giganews.com... I'm writing a script with a while loop in it. How can I get it to go slower so that it doesn't appear to happen all at once--so that it looks
animated--basically. I tried the setTimeout(500) in the last line of the
loop, but that just messes things up. Any help would be
appreciated--thanks.
here is what I'm doing:
<html>
<head>
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox")
var idofbluebox = document.getElementById("bluebox")
var blueboxwidthnum = parseInt(idofbluebox.style.width)
var blueboxheightnum = parseInt(idofbluebox.style.height)
while (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 200 wide and 200
high</a> <div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
I'm trying to have the box grow slowly so it looks animated. I didn't get
around to the height part yet. BTW, is there a way I can do the height at
the same time as the width? Thanks.
sorry for the messed up message, it included a second half which was a copy
of a message sent to another user - only the first half was for your
question - mistakes that can ahppen with 4 wiondows open!
ciao
"Vicomte De Valmont" <NO****@hotmail.com> wrote in message
news:bn**********@lacerta.tiscalinet.it... sorry for the messed up message, it included a second half which was a
copy of a message sent to another user - only the first half was for your
question - mistakes that can ahppen with 4 wiondows open!
ciao
I appreciate the help. BTW, the stuff about the images was meant for me
anyway--I'm the one who posted that message:) Is there a better way to have
the box grow gradually if not with a loop? thanks.
ciao
yes in javascript you can do that by using setInterval
Check on a manual the explanations about it, or online any javascript manual
printed on the web will certainly include a reference to setInterval:
by and large if you have a function that does something:
var foo=setInterval("funcname()",500);
that would execute funcname() at a rhythm of half a second, continuously.
You stop it by clearInterval(foo)
If you have problems with passing arguments, you cannot pass arguments
inside setInterval like:
setInterval("funcname(arg1, arg2)", 500); //<-- wrong!
you have to deifine your arguments like global variables, that's the only
scope a setInterval would safely resepct on all browsers. Of course you
didn't ask specifications on this, but I was jyust trying to anticipate a
common question, you see, in case you use setInterval
Forget slowing down the loop, it cannot be done in any way, the only thiung
that "slows down" a loop is the amount of code the loop includes, and yet
that is still darn fast even if it is a lot as you know
ciao
Alberto http://www.unitedscripters.com/
"TheKeith" <no@spam.com> ha scritto nel messaggio
news:XO********************@giganews.com...
"Vicomte De Valmont" <NO****@hotmail.com> wrote in message
news:bn**********@lacerta.tiscalinet.it... sorry for the messed up message, it included a second half which was a copy of a message sent to another user - only the first half was for your
question - mistakes that can ahppen with 4 wiondows open!
ciao
I appreciate the help. BTW, the stuff about the images was meant for me
anyway--I'm the one who posted that message:) Is there a better way to
have the box grow gradually if not with a loop? thanks.
On Sun, 26 Oct 2003 22:27:13 -0500
"TheKeith" <no@spam.com> wrote:
"TheKeith" <no@spam.com> wrote in message
news:6c********************@giganews.com... I'm writing a script with a while loop in it. How can I get it to go slower so that it doesn't appear to happen all at once--so that it looks
animated--basically. I tried the setTimeout(500) in the last line of
the loop, but that just messes things up. Any help would be
appreciated--thanks.
<snip> I'm trying to have the box grow slowly so it looks animated. I didn't
get around to the height part yet. BTW, is there a way I can do the
height at the same time as the width? Thanks.
It's best to think of setInterval as a kind of loop that is interrupt
driven. The body you want executed every x ms should be in the callback
method for the clock. FWIW, I have included code that works for me
below. YMMV.
<html>
<head>
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
onClockTick = function() {
if(blueboxwidthnum < widthto) {
// width
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
// height
blueboxheightnum = parseInt(idofbluebox.style.height) + 1;
idofbluebox.style.height = blueboxheightnum + 'px';
}else{
clearInterval(interval_ID);
};
};
var idofbluebox = document.getElementById("bluebox")
var blueboxwidthnum = parseInt(idofbluebox.style.width)
var blueboxheightnum = parseInt(idofbluebox.style.height)
var interval_ID = setInterval(onClockTick, 100);
};
/*
while (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
*/
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 200 wide and 200
high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)
"Albert Wagner" <al******@tcac.net> wrote in message
news:20031027110328.4e32a352.al******@tcac.net... On Sun, 26 Oct 2003 22:27:13 -0500
"TheKeith" <no@spam.com> wrote:
"TheKeith" <no@spam.com> wrote in message
news:6c********************@giganews.com... I'm writing a script with a while loop in it. How can I get it to go
slower so that it doesn't appear to happen all at once--so that it looks
animated--basically. I tried the setTimeout(500) in the last line of
the loop, but that just messes things up. Any help would be
appreciated--thanks.
<snip> I'm trying to have the box grow slowly so it looks animated. I didn't
get around to the height part yet. BTW, is there a way I can do the
height at the same time as the width? Thanks.
It's best to think of setInterval as a kind of loop that is interrupt
driven. The body you want executed every x ms should be in the callback
method for the clock. FWIW, I have included code that works for me
below. YMMV.
<html>
<head>
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
onClockTick = function() {
if(blueboxwidthnum < widthto) {
// width
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
// height
blueboxheightnum = parseInt(idofbluebox.style.height) + 1;
idofbluebox.style.height = blueboxheightnum + 'px';
}else{
clearInterval(interval_ID);
};
};
var idofbluebox = document.getElementById("bluebox")
var blueboxwidthnum = parseInt(idofbluebox.style.width)
var blueboxheightnum = parseInt(idofbluebox.style.height)
var interval_ID = setInterval(onClockTick, 100);
};
/*
while (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
*/
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 200 wide and 200
high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
I appreciate the help--thanks. I can't get it to work though. Here is what I
put:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox");
var blueboxwidthnum = parseInt(idofbluebox.style.width);
var blueboxheightnum = parseInt(idofbluebox.style.height);
var interval_ID = setInterval(onClockTick, 100);
onClockTick = function() {
if (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
setTimeout("growbluebox()",500);
}
}
else {
clearInterval(interval_ID);
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow to 500 wide and 400 high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
Is there anything wrong there? Thanks.
"TheKeith" <no@spam.com> wrote in message
news:2e********************@giganews.com... "Albert Wagner" <al******@tcac.net> wrote in message
news:20031027110328.4e32a352.al******@tcac.net... On Sun, 26 Oct 2003 22:27:13 -0500
"TheKeith" <no@spam.com> wrote:
"TheKeith" <no@spam.com> wrote in message
news:6c********************@giganews.com...
> I'm writing a script with a while loop in it. How can I get it to go
slower
> so that it doesn't appear to happen all at once--so that it looks
> animated--basically. I tried the setTimeout(500) in the last line of
> the loop, but that just messes things up. Any help would be
appreciated--thanks. <snip> I'm trying to have the box grow slowly so it looks animated. I didn't
get around to the height part yet. BTW, is there a way I can do the
height at the same time as the width? Thanks.
It's best to think of setInterval as a kind of loop that is interrupt
driven. The body you want executed every x ms should be in the callback
method for the clock. FWIW, I have included code that works for me
below. YMMV.
<html>
<head>
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
onClockTick = function() {
if(blueboxwidthnum < widthto) {
// width
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
// height
blueboxheightnum = parseInt(idofbluebox.style.height) + 1;
idofbluebox.style.height = blueboxheightnum + 'px';
}else{
clearInterval(interval_ID);
};
};
var idofbluebox = document.getElementById("bluebox")
var blueboxwidthnum = parseInt(idofbluebox.style.width)
var blueboxheightnum = parseInt(idofbluebox.style.height)
var interval_ID = setInterval(onClockTick, 100);
};
/*
while (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
*/
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 200 wide and 200
high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
I appreciate the help--thanks. I can't get it to work though. Here is what
I put:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox");
var blueboxwidthnum = parseInt(idofbluebox.style.width);
var blueboxheightnum = parseInt(idofbluebox.style.height);
var interval_ID = setInterval(onClockTick, 100);
onClockTick = function() {
if (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
setTimeout("growbluebox()",500);
}
}
else {
clearInterval(interval_ID);
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow to 500 wide and 400
high</a> <div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
Is there anything wrong there? Thanks.
I noticed the bad placement of the closing bracket--it still doesn't work
though.
On Tue, 28 Oct 2003 18:32:19 -0500
"TheKeith" <no@spam.com> wrote:
<snip> I appreciate the help--thanks. I can't get it to work though. Here is
what I put:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox");
var blueboxwidthnum = parseInt(idofbluebox.style.width);
var blueboxheightnum = parseInt(idofbluebox.style.height);
var interval_ID = setInterval(onClockTick, 100);
onClockTick = function() {
if (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
setTimeout("growbluebox()",500);
This should be 'setInterval' rather than 'setTimeout'.
}
}
else {
clearInterval(interval_ID);
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow to 500 wide and 400
high</a><div id="bluebox" style="position:absolute; left:189px;
top:96px; width:228px; height:129px; z-index:1; background-color:
#99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
Is there anything wrong there? Thanks.
--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)
On Tue, 28 Oct 2003 19:31:06 -0600
Albert Wagner <al******@tcac.net> wrote:
Sorry, I just scanned your post and didn't read it. My previous post was
wrong. On Tue, 28 Oct 2003 18:32:19 -0500
"TheKeith" <no@spam.com> wrote:
<snip> I appreciate the help--thanks. I can't get it to work though. Here
is what I put:
What is wrong with the code I posted? It's unclear whether my code
didn't run in your environment or your modified code still doesn't run.
You code below doesn't run because:
(1) You placed the onClockTick function below, rather than above the
setInterval statement, so that onClockTick is undefined at the time the
setInterval statement is executed.
(2) You placed a setTimeout statement within the onClockTick function.
This causes an infinite recursion.
(3) You had misplaced '}'s.
When I corrected the above two items, your code ran in my environment.
Also, always use a document header. What browser are you testing in? I
run on Linux with Opera 7.21 and Netscape 7.1. I know nothing about IE.
setInterval(functionName, interval) starts a timer running that will
continuously call functionName every interval milliseconds until stopped
with the clearInterval function. The program does not halt at the
setInterval, but continues immediately with the following code.
setTimer(functionName, interval) starts a timer running that will, at
the end of the interval, call functionName ONCE. setTimer, like
setInterval, does not stop to wait on the timer, but continues
immediately with the following code.
I hope that helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"><script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox");
var blueboxwidthnum = parseInt(idofbluebox.style.width);
var blueboxheightnum = parseInt(idofbluebox.style.height);
var interval_ID = setInterval(onClockTick, 100);
onClockTick = function() {
if (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 1;
idofbluebox.style.width = blueboxwidthnum + "px";
setTimeout("growbluebox()",500);
Why was a setTimeout inserted here?
}
}
else {
clearInterval(interval_ID);
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow to 500 wide and 400
high</a><div id="bluebox" style="position:absolute; left:189px;
top:96px; width:228px; height:129px; z-index:1; background-color:
#99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
Is there anything wrong there? Thanks.
--
Life is an offensive, directed against the repetitious mechanism of
the Universe.
--Alfred North Whitehead (1861-1947)
--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)
> What is wrong with the code I posted? It's unclear whether my code didn't run in your environment or your modified code still doesn't run.
You code below doesn't run because:
(1) You placed the onClockTick function below, rather than above the
setInterval statement, so that onClockTick is undefined at the time the
setInterval statement is executed.
(2) You placed a setTimeout statement within the onClockTick function.
This causes an infinite recursion.
(3) You had misplaced '}'s.
When I corrected the above two items, your code ran in my environment.
Also, always use a document header. What browser are you testing in? I
run on Linux with Opera 7.21 and Netscape 7.1. I know nothing about IE.
setInterval(functionName, interval) starts a timer running that will
continuously call functionName every interval milliseconds until stopped
with the clearInterval function. The program does not halt at the
setInterval, but continues immediately with the following code.
setTimer(functionName, interval) starts a timer running that will, at
the end of the interval, call functionName ONCE. setTimer, like
setInterval, does not stop to wait on the timer, but continues
immediately with the following code.
I hope that helps.
Thanks I modified your stuff a little so that it made more sense to me and
everything is working fine. Here is what I put:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox");
var blueboxwidthnum = parseInt(idofbluebox.style.width);
var blueboxheightnum = parseInt(idofbluebox.style.height);
setInterval(tween, 1);
function tween() {
if (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 10;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 500 wide and 400 high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
Basically, I think the part that threw me off from the beginning was that I
didn't realize that if you use the setInterval or setTimeout methods, you
needed to place a blank function within the outer-most function in order to
make it work. I do have one other question: Do I have to use clearInterval
in my case, since the function being called by "setInterval" contains only a
conditional? Thanks.
On Wed, 29 Oct 2003 17:20:19 -0500
"TheKeith" <no@spam.com> wrote:
<snip>
Thanks I modified your stuff a little so that it made more sense to me
and everything is working fine. Here is what I put:
<snip>
Basically, I think the part that threw me off from the beginning was
that I didn't realize that if you use the setInterval or setTimeout
methods, you needed to place a blank function within the outer-most
function in order to make it work.
I don't know what you mean by this, but I'm glad it works for you.
I do have one other question: Do I have to use clearInterval
in my case, since the function being called by "setInterval" contains
only a conditional? Thanks.
Depends. The interval timer is still running and calling the tween
function. If you don't mind the loss of processing cycles while your
page is up, then I guess not. It's neater though.
It just occured to me that the tween function may be what you refer to
as a "blank" function. It's just an inner function. I use them a lot,
especially in object constructors, because it simplifies accessing the
parent's variables. It's a habit that may have confused you. You could
just as easily have placed it outside, as long as it has access to the
needed variables:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
var idofbluebox;
var blueboxwidthnum;
var blueboxheightnum;
var widthLimit, heightLimit;
function growbluebox(widthto,heightto) {
idofbluebox = document.getElementById("bluebox");
blueboxwidthnum = parseInt(idofbluebox.style.width);
blueboxheightnum = parseInt(idofbluebox.style.height);
widthLimit = widthto;
heightLimit = heightto;
setInterval(tween, 1);
}
function tween() {
if (blueboxwidthnum < widthLimit) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 10;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 500 wide and 400
high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)
"Albert Wagner" <al******@tcac.net> wrote in message
news:20031029193736.065d9f29.al******@tcac.net... On Wed, 29 Oct 2003 17:20:19 -0500
"TheKeith" <no@spam.com> wrote:
<snip>
Thanks I modified your stuff a little so that it made more sense to me
and everything is working fine. Here is what I put: <snip>
Basically, I think the part that threw me off from the beginning was
that I didn't realize that if you use the setInterval or setTimeout
methods, you needed to place a blank function within the outer-most
function in order to make it work.
I don't know what you mean by this, but I'm glad it works for you.
I do have one other question: Do I have to use clearInterval
in my case, since the function being called by "setInterval" contains
only a conditional? Thanks.
Depends. The interval timer is still running and calling the tween
function. If you don't mind the loss of processing cycles while your
page is up, then I guess not. It's neater though.
I do mind the loss of processing cycles. Is there some kind of software I
can use to tell me if a script is still running even if nothing appears to
be happening? I just added a clearInterval, like this:
----------------------------------------------------------------------------
-----------------
<script type="text/JavaScript">
function growbluebox(widthto,heightto) {
var idofbluebox = document.getElementById("bluebox");
var blueboxwidthnum = parseInt(idofbluebox.style.width);
var blueboxheightnum = parseInt(idofbluebox.style.height);
var tweenspeed = setInterval(tween, 1);
function tween() {
if (blueboxwidthnum < widthto) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 10;
idofbluebox.style.width = blueboxwidthnum + "px";
blueboxposleft = parseInt(idofbluebox.style.left) - 5;
idofbluebox.style.left = blueboxposleft + "px";
}
if (blueboxheightnum < heightto) {
blueboxheightnum = parseInt(idofbluebox.style.height) + 10;
idofbluebox.style.height = blueboxheightnum + "px";
blueboxpostop = parseInt(idofbluebox.style.top) - 5;
idofbluebox.style.top = blueboxpostop + "px";
}
if (blueboxwidthnum == widthto && blueboxheightnum == heightto) {
clearInterval(tweenspeed)
}
}
}
</script>
----------------------------------------------------------------------------
--------------------
should this work with the clearInterval within the actual function called by
the setInterval method? I can't tell if it is working or not.
It just occured to me that the tween function may be what you refer to
as a "blank" function. It's just an inner function.
yeah that's what I meant. Sorry for not having been more clear.
I use them a lot, especially in object constructors, because it simplifies accessing the
parent's variables. It's a habit that may have confused you. You could
just as easily have placed it outside, as long as it has access to the
needed variables:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
var idofbluebox;
var blueboxwidthnum;
var blueboxheightnum;
var widthLimit, heightLimit;
function growbluebox(widthto,heightto) {
idofbluebox = document.getElementById("bluebox");
blueboxwidthnum = parseInt(idofbluebox.style.width);
blueboxheightnum = parseInt(idofbluebox.style.height);
widthLimit = widthto;
heightLimit = heightto;
setInterval(tween, 1);
}
function tween() {
if (blueboxwidthnum < widthLimit) {
blueboxwidthnum = parseInt(idofbluebox.style.width) + 10;
idofbluebox.style.width = blueboxwidthnum + "px";
}
}
</script>
</head>
<body>
<a href="#" onClick="growbluebox(500,400)">grow by 500 wide and 400
high</a>
<div id="bluebox" style="position:absolute; left:189px; top:96px;
width:228px; height:129px; z-index:1; background-color: #99CCFF;
layer-background-color: #99CCFF; border: 1px none #000000;"></div>
</body>
</html>
gotcha--thanks again.
On Wed, 29 Oct 2003 20:24:30 -0500
"TheKeith" <no@spam.com> wrote:
<snip> I do mind the loss of processing cycles. Is there some kind of
software I can use to tell me if a script is still running even if
nothing appears to be happening? I just added a clearInterval, like
this:
There are several ways:
(1) the simplest is using an alert popup:
alert('The program got here');
This has the disadvantage that when called within a tight loop, you get
a bunch of them all at once.
(2) In Opera there is a special javascript statement:
opera.postError('The program got here');
This displays on the javascript console and doesn't have to be replied
to like the alert above. There may be something equivalent in other
browsers.
(3) You can dynamically add elements to your page (or a debugging page):
var p = document.createElement('p');
p.appendChild(document.createTextNode('The program got here');
document.body.appendChild(p);
(4) You can write a debugging harness. Use a frame set with the one
frame for controls like a textarea for debugging messages and load the
page to be tested in the other frame. I've built one of these for
testing animations but I was (still am) a newbie with javascript and it
was a hell of a learning experience.
(5) Netscape 7.1 and Mozilla have available the Venkman debugger. This
is probably the coolest debugging tool going.
(6) There are probably many more, but these are the only ones I have
personally utilized. Perhaps others here can offer their suggestions.
<snip> should this work with the clearInterval within the actual function
called by the setInterval method? I can't tell if it is working or
not.
<snip>
Yeah. Should work OK. Good luck on your project.
--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947) Yeah. Should work OK. Good luck on your project.
thanks a lot
JRS: In article <me********************@giganews.com>, seen in
news:comp.lang.javascript, TheKeith <no@spam.com> posted at Wed, 29 Oct
2003 20:24:30 :-
I do mind the loss of processing cycles. I
Reasonable; others feel likewise.
Therefore, you should trim your quotations to about the minimum
reasonably necessary.
That will save processing cycles in computer hardware; more importantly,
it will save processing time in whatever it is that holds the ears of
your readers apart.
--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links. This discussion thread is closed Replies have been disabled for this discussion. Similar topics
7 posts
views
Thread by John T. McDougald |
last post: by
|
5 posts
views
Thread by tony |
last post: by
|
3 posts
views
Thread by Dan Stromberg |
last post: by
|
7 posts
views
Thread by Chris Thompson |
last post: by
|
7 posts
views
Thread by davidst95 |
last post: by
|
1 post
views
Thread by =?Utf-8?B?QWRwcm9m?= |
last post: by
| | | | | | | | | | | | | | | | | | | | | | | | | |
