Javascript animation

[wmschneider]

I am trying to make a progress animation so that the user knows that
there files are correctly being checked in. Trying to animate papers
moving from the computer to the server pics. I'm brand new at this
language, however, I've been programming in C++ for awhile. This is my
code for that part of it. And I call the startAnimation() function
when the button finish is clicked on. Represented like: <INPUT
TYPE="SUBMIT" NAME="SUBMIT" onclick ="startAnimation()" VALUE="Finish">

<STYLE><!--
var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;

function startAnimation(){
anim1 = new animation("paper");
anim1.slideBy(320,2, 99, 50);
}

function animation(id) {
this.element = (NS4) ? document[id] : document.all[id].style;
this.active = 0;
this.timer = null;
this.path = null;
this.num = null;

this.name = id + "Var";
eval(this.name + " = this");

this.animate = animate;
this.step = step;
this.show = show;
this.hide = hide;
this.left = left;
this.top = top;
this.moveTo = moveTo;
this.slideBy = slideBy;
this.slideTo = slideTo;
}

function left() {
return parseInt(this.element.left);
}

function top() {
return parseInt(this.element.top);
}

function left() {
return (NS4) ? this.element.left : this.element.pixelLeft;
}

function top() {
return (NS4) ? this.element.top : this.element.pixelTop;
}

function show() {
this.element.visibility = (NS4) ? "show" : "visible";
}

function hide() {
this.element.visibility = (NS4) ? "hide" : "hidden";
}

function moveTo(x, y) {
this.element.left = x;
this.element.top = y;
}

function slideTo(tx, ty, steps, interval) {
var fx = this.left();
var fy = this.top();
var dx = tx - fx;
var dy = ty - fy;
var sx = dx / steps;
var sy = dy / steps;

var ar = new Array();
for (var i = 0; i < steps; i++) {
fx += sx;
fy += sy;
ar = new pos(fx, fy);
}
this.path = ar;
this.animate(interval);
}

function pos(x, y) {
this.x = Math.round(x);
this.y = Math.round(y);
}

function slideBy(dx, dy, steps, interval) {
var fx = this.left();
var fy = this.top();
var tx = fx + dx;
var ty = fy + dy;
this.slideTo(tx, ty, steps, interval);
}

function animate(interval) {
if (this.active) return;
this.num = 0;
this.active = 1;
this.timer = setInterval(this.name + ".step()", interval);
}

function step() {
this.moveTo(this.path[this.num].x, this.path[this.num].y);
if (this.num >= this.path.length - 1) {
clearInterval(this.timer);
this.active = 0;
if (this.statement)
eval(this.statement);
} else {
this.num++;
}
}

 

[Zif]

I am trying to make a progress animation so that the user knows that
there files are correctly being checked in. Trying to animate papers
moving from the computer to the server pics. I'm brand new at this
language, however, I've been programming in C++ for awhile. This is my
code for that part of it. And I call the startAnimation() function
when the button finish is clicked on. Represented like: <INPUT
TYPE="SUBMIT" NAME="SUBMIT" onclick ="startAnimation()" VALUE="Finish">

I can't agree that such stuff is of any use - I thought that's what
animated cursors were for. Besides, what if the user submits the form
without clicking the submit button? E.g. types some content and
presses enter?

<STYLE><!--

Since what follows appears to be JavaScript, perhaps you'd better put
it in a script element rather than a style element. And while we're at
it, let's include required attributes lest the validator coughs at us -
oh, and remove the HTML comment delimiter, it's very outdated and
potentially harmful:

var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;

It's a good idea not to post with tabs, replace them with 2 or 4 spaces
for indents (I've replaced them with one space).

Search for 'feature detection' and 'browser sniffing'. The above is a
totally inadequate test given the purpose which it is put below. It
will also exclude a good percentage (20%? 30%?) of browsers that don't
support document.all or document.layers.

Probably 95% of browsers in use support document.getElementById, it is
a much better strategy to target those browsers by default and then
deal with the exceptions only as required.

There are recently posted examples of how to ensure a suitable outcome
using document.getElementById and still support document.all and
document.layers.

function startAnimation(){
anim1 = new animation("paper");
anim1.slideBy(320,2, 99, 50);
}

function animation(id) {
this.element = (NS4) ? document[id] : document.all[id].style;

The above line will not do what I think you want it to do in any
browser. Guessing at your intention, and if support for
getElementById is used as proposed above, then this becomes:

this.element = document.getElementById(id);

this.active = 0;
this.timer = null;
this.path = null;
this.num = null;

this.name = id + "Var";
eval(this.name + " = this");

Eval is almost never required and is nearly always completely
unnecessary. I can't see that it does anything here.

this.name = id + "Var";

[...]

function left() {
return (NS4) ? this.element.left : this.element.pixelLeft;
}

function top() {
return (NS4) ? this.element.top : this.element.pixelTop;
}

Accessing the position of elements in a page varies from browser to
browser. Browse around quirksmode:

<URL:http://www.quirksmode.org/js/cross_dhtml.html>

The link is to a page on DHTML, but much of what it does is applicable
to your stuff here.

This highlights that the browser test above infers support for many
features based on testing just one method of one object - a very
unreliable strategy.

[...]

What do you expect will make the animation stop?

 

[Jc]

I am trying to make a progress animation so that the user knows that
there files are correctly being checked in. Trying to animate papers
moving from the computer to the server pics.

Perhaps toggling the display of an image element pointing to an
animated GIF representing your animation would work better.

 

[Zif]

... snipped ....


I'm new to HTML, and so am curious as to why you admonish removing the HTML
comment delimiter. Is there a preferred way to put in a comment? Thanks.

Admonish? I'd have said 'advise' removal.

There is no need to try to hide scripts with HTML comments at all. The
'script' tag was introduced with HTML 3.2 (about 1996/7 I think). Any
browser released after that should know not to render the content, even
if they don't understand it.

'JavaScript' was introduced by Netscape Communications in Navigator 2
(about 1995), Microsoft introduced support in IE 3, so any browser less
than say 9 years old has no excuse for not knowing what to do with
script elements.

Most advice is that scripts should be in an external file anyway,
leaving the script element empty and removing any last vestige of a
requirement to 'hide' the script:

<script type="text/javascript" src="a_script_file.js"></script>

Though for posting working examples to this newsgroup it's highly
desirable to include the script contents in the HTML.

Also, for maximum browser compatibility, should I use jscript or javascript?

Jscript and JavaScript are both implementations of ECMAScript Language
(ECMA-262). Jscript is Microsoft's name for their implementation,
everyone else calls their's JavaScript.

Substituting 'jscript' for 'javascript' in the type attribute of the
script tag will prevent your script from working in most browsers other
than IE. IE is happy to work with JavaScript, so use 'javascript'.

Thanks again. -Fred

You're welcome.