By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,648 Members | 1,634 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,648 IT Pros & Developers. It's quick & easy.

animation behavior

P: n/a
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Animate Card test</TITLE>
<style type=text/css>
#cardRun {
position:absolute;
left:600px;
top:120px;
}
</style>
<script type="text/javascript">
var TID = null;
function runCard() {
var el = document.images['cardRun'];
if (el.offsetLeft <= 350) clearInterval(TID);
el.style.left = el.offsetLeft - 10 + 'px';
}
</script></HEAD>
<BODY onload="TID=setInterval('runCard()',10)">
<img id="cardRun" src="0.gif" width=70 height=99 alt="" border="0">
</BODY></HTML>
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Animate Card test</TITLE>
<style type=text/css>
#cardRun {
position:absolute;
left:600px;
top:120px;
}
</style>
<script type="text/javascript">
var TID = null;
function runCard() {
var el = document.images['cardRun'];
if (el.offsetLeft <= 350) clearInterval(TID);
el.style.left = el.offsetLeft - 10 + 'px';
}
</script></HEAD>
<BODY onload="TID=setInterval('runCard()',10)">
You don't say what OS you're using but Windows 95/98/ME's timer is only
accurate to about 55ms, so you're calling setInterval() 5 times for each
period Windows 95/98/ME can actually resolve.

IE may be trying to honor those requests, stacking 5 up for each period,
resulting in some sort of slowdown. Gecko-based browsers may be increase
the setInterval() period to only perform the request as fast as the
underlying OS can go.

The code seems to work about the same in Mozilla 1.7.5, FireFox 1.0 and
IE 6.0.2800 under Windows XP. Also tested in IE 6.0.2900.

<url: http://mindprod.com/jgloss/time.html />
<img id="cardRun" src="0.gif" width=70 height=99 alt="" border="0">
</BODY></HTML>


--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #2

P: n/a
rh
J. J. Cale wrote:
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<...>

With IE, you get one page rendering per timer interval (about 55ms on
Win 95/98), so the only thing you can do to speed up the animation is
to reduce the number of renderings. Here's an example:

<script type="text/javascript">
/*JRS*/
/**/function animate( ) {
/**/ var stopLeft = 350;
/**/ var el = document.images['cardRun'];
/**/ function runCard( ) {
/**/ var rateFactor = 0.3;
/**/ var offset = Math.max( el.offsetLeft -
/**/ ( (el.offsetLeft - stopLeft ) * rateFactor) | 0, stopLeft );
/**/ el.style.left = offset + 'px';
/**/ if ( offset <= stopLeft ) clearInterval( TID );
/**/ }
/**/ var TID = setInterval( runCard, 50 )
/**/}
/*JRS*/
</script>

which can be initiated with:

<BODY onload="setTimeout( 'animate()', 1000 )">

Of course, this reduces Mozilla (and friends) to the same level, so you
may wish to alter the approach based on the browser that's running.
..
../rh

Jul 23 '05 #3

P: n/a
rh
Grant Wagner wrote:
"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<...>
You don't say what OS you're using but Windows 95/98/ME's timer is only accurate to about 55ms, so you're calling setInterval() 5 times for each period Windows 95/98/ME can actually resolve.

IE may be trying to honor those requests, stacking 5 up for each period, resulting in some sort of slowdown. Gecko-based browsers may be increase the setInterval() period to only perform the request as fast as the
underlying OS can go.

The code seems to work about the same in Mozilla 1.7.5, FireFox 1.0 and IE 6.0.2800 under Windows XP. Also tested in IE 6.0.2900.


Interestingly, though, the animation in the OP's example is smoother in
Mozilla, Firefox and Netscape on Win/98. Also, there's a noticeable
difference between the interval being set to 10 versus 55 in these
browsers, which suggests that there's more than one rendering being
done per timer resolution cycle with the lowered setting.

It also appears that some care is required in setting the interval
value. A value of 55 causes Opera 7.1 to miss cycles, having the effect
of bumping to the next level (~ 110ms) .
..
../rh

Jul 23 '05 #4

P: n/a

"Grant Wagner" <gw*****@agricoreunited.com> wrote in message
news:Ks**************@news2.mts.net...
"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Animate Card test</TITLE>
<style type=text/css>
#cardRun {
position:absolute;
left:600px;
top:120px;
}
</style>
<script type="text/javascript">
var TID = null;
function runCard() {
var el = document.images['cardRun'];
if (el.offsetLeft <= 350) clearInterval(TID);
el.style.left = el.offsetLeft - 10 + 'px';
}
</script></HEAD>
<BODY onload="TID=setInterval('runCard()',10)">


You don't say what OS you're using but Windows 95/98/ME's timer is only
accurate to about 55ms, so you're calling setInterval() 5 times for each
period Windows 95/98/ME can actually resolve.

IE may be trying to honor those requests, stacking 5 up for each period,
resulting in some sort of slowdown. Gecko-based browsers may be increase
the setInterval() period to only perform the request as fast as the
underlying OS can go.

The code seems to work about the same in Mozilla 1.7.5, FireFox 1.0 and
IE 6.0.2800 under Windows XP. Also tested in IE 6.0.2900.

<url: http://mindprod.com/jgloss/time.html />
<img id="cardRun" src="0.gif" width=70 height=99 alt="" border="0">
</BODY></HTML>


--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Grant hi
Yes I'm running win98! You reckon this is OS specific. I've since tried
using different cycle times but the results are the same for my two
browsers. I've decided to give up on the animation for now. I was just
trying to simulate dealing a card in case anyone has a ready routine. (No
Flash just javascript) Thanks for the reply.
Jimbo
Jul 23 '05 #5

P: n/a
JRS: In article <11**********************@f14g2000cwb.googlegroups .com>
, dated Mon, 10 Jan 2005 10:27:21, seen in news:comp.lang.javascript, rh
<co********@yahoo.ca> posted :

It also appears that some care is required in setting the interval
value. A value of 55 causes Opera 7.1 to miss cycles, having the effect
of bumping to the next level (~ 110ms) .


That's not unreasonable, since the true average interval is about
54.925495 milliseconds of the nominal clock.

If complete regularity is desired, try setTimeout, recalculating the
delay each time and subtracting a suitable bias.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #6

P: n/a
rh
Dr John Stockton wrote:
JRS: In article <11**********************@f14g2000cwb.googlegroups .com> , dated Mon, 10 Jan 2005 10:27:21, seen in news:comp.lang.javascript, rh <co********@yahoo.ca> posted :

It also appears that some care is required in setting the interval
value. A value of 55 causes Opera 7.1 to miss cycles, having the effectof bumping to the next level (~ 110ms) .
That's not unreasonable, since the true average interval is about
54.925495 milliseconds of the nominal clock.


That would be the theory (and I'm not arguing).

The caution was more to do with my recollection of seeing the value
"55" used in some setTimout/setInterval examples in this group some
time ago (undoubtably in relation to Win95/98). Whereas it seems that
IE doesn't bump until around a value of 56, Opera does so at 55. So if
you want a minimum time between events, you want to use something less
than 55.

Given that recent systems provide better timer resolution, and in cases
where maximum events are desired, it may be reasonable to use a value
of 1ms for setInterval, which should result the minimum latency that
can be delivered by the system.
If complete regularity is desired, try setTimeout, recalculating the
delay each time and subtracting a suitable bias.


Perhaps I'll let you try that :-), because I'm a little doubtful about
acheiving success, particularly cross-browser, in this way. Not that it
isn't a good idea -- it's just that in this area nothing is as simple
and straightforward as one might like it to be.

For example, timing tests in the Mozilla family produce the expected
results of ~55ms for setInterval invocation with values in the range of
1-55. E.g., see Lasse's test at:

<url: http://www.infimum.dk/privat/timercheck3.html >

However, the first set of timing events appear to be delivered in well
under the ~55ms level. For example, using the OP's sample code with a
setInterval of 10ms, the animation is completed with an average of
~13ms per iteration.

Nonetheless, putting the animation in a loop, it gradually slows, as
the iteration interval appears to work its way up toward the 55ms
level.

This sort of behaviour doesn't seem to be particularly tractable to me.
..
../rh

Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.