Javascript animation

Discussion in 'Javascript' started by wmschneider, Jun 16, 2005.

  1. wmschneider

    wmschneider Guest

    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++;
    }
    }
     
    wmschneider, Jun 16, 2005
    #1
    1. Advertisements

  2. wmschneider

    Zif Guest

    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?
    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:

    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.
    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);
    Eval is almost never required and is nearly always completely
    unnecessary. I can't see that it does anything here.

    this.name = id + "Var";

    [...]
    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?
     
    Zif, Jun 17, 2005
    #2
    1. Advertisements

  3. wmschneider

    Jc Guest

    Perhaps toggling the display of an image element pointing to an
    animated GIF representing your animation would work better.
     
    Jc, Jun 17, 2005
    #3
  4. wmschneider

    Zif Guest

    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.
    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'.
    You're welcome. :)
     
    Zif, Jun 21, 2005
    #4
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.