473,394 Members | 1,867 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

animation behavior

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
6 1840
"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
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
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

"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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Simena Dinas | last post by:
KToon: 2D Animation Toolkit KToon is a 2D Animation Toolkit designed by animators (Toonka Films) for animators, focused to the Cartoon's industry. This project is covered by the GPL License...
5
by: Brian Angliss | last post by:
I'm relatively new to scripting in JavaScript, so I'm not too surprised I'm having difficulty scripting up an animation effect for my personal site. What I'm trying to do is the following: When...
11
by: Eugene | last post by:
Setting backcolor for the animation control does not take effect. The BackStyle property is set to cc2BackstyleTransparent. No matter what BackColor property is set to, in run time the backcolor...
6
by: Darren | last post by:
X-No-Archive Hi all, Can anyone help me with structuring the data in a small tool I have to build? I'm trying to work out if there's a design pattern or data structure that would remove some...
3
by: James | last post by:
Hello, I'm new to c# and have created an animation which draws directly to the window, it uses the code below which all works. I would like to know if this is the 'correct' way to do it - or...
10
by: Robert Skidmore | last post by:
Take a look at this new JS function I made. It is really simple but very powerful. You can animate any stylesheet numeric value (top left width height have been tested), and works for both % and px...
4
by: petermichaux | last post by:
Hi, Is there any way to make DOM scripted animation smoother? Flash is far superior in this area. Any one here know what makes Flash so smooth by comparison? I don't like the fact that the...
2
by: rdemyan via AccessMonster.com | last post by:
My application has a lot of complicated SQL statements, calculations, processing that takes time. I've created a custom form to act like a messagebox. It has 10 small rectangles on it that change...
4
by: Sin Jeong-hun | last post by:
Most applications, including Windows Explorer, show some sort of 'wait' dialog with animation when a lengthy operation is going on. For example, When the Windows Explorer is searching for...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.