DocType impact on javascript

Discussion in 'Javascript' started by RK, Nov 10, 2008.

  1. RK

    RK Guest

    I'm exploring javascript as a newbie, and have noted that the DocType
    has a substantial impact on some of the things I'm trying to do. I
    guess certain features have been deprecated, and do not work when I mess
    with DocType settings.

    I'm playing with dynamic image positioning example off the web where an
    image has been positioned with CSS left and top positions gets moved
    with arrow keys.

    The example runs if I impose an HTML DocType of '//W3C//DTD HTML 3.2
    Final//EN' but it won't in HTML 4.01 or my desired "XHTML 1.0
    Transitional".

    Code info... You can try it out here:
    http://newmedia.purchase.edu/~Jeanine/arrowbird.html

    But simply, an image is instantiated on the HTML with:


    <div id="bird">
    <img src="bird.gif" width=16 height=16> </div>

    ....and the CSS positions it with:

    <style type="text/css">
    #bird {position: absolute;
    top: 200px;
    left: 200px;
    }

    ....then in javascript,

    function move(deltax, deltay) {
    console.log("Move Called and name is: " + thisBallPic.name);
    console.log(" Locn: " + thisBallPic.y);

    var x = new getObj("bird"); // func sets up the obj refs
    currentx += deltax;
    currenty += deltay;
    x.style.top = currenty;
    x.style.left = currentx;



    // position may change for next move
    if (currentx>swidth) {
    currentx = 0; }
    if (currenty>sheight) {
    currenty = 0;}
    if ((currentx + iwidth)<0) {
    currentx = swidth; }
    if ((currenty+iheight)<0) {
    currenty = sheight;}
    }

    MY QUESTION: What element of this is not supported in the more recent
    HTML doc types and is there some substitution available to be XHTML 1.0
    friendly?

    Thanks in advance,
    Ross.
     
    RK, Nov 10, 2008
    #1
    1. Advertising

  2. RK wrote:

    > ...and the CSS positions it with:
    >
    > <style type="text/css">
    > #bird {position: absolute;
    > top: 200px;
    > left: 200px;


    Here in your static CSS you correctly use a number (e.g. 200) and a unit
    (e.g. px) for your top and left properties.


    > x.style.top = currenty;
    > x.style.left = currentx;


    In your script code you need to do the same e.g.
    x.style.top = currenty + 'px';

    In quirks mode browsers might let you get away with assigning a number
    only but most doctypes trigger strict mode. See
    https://developer.mozilla.org/index.php?title=En/Mozilla's_Quirks_Mode

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 10, 2008
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dave

    Search Engine Impact of ASP

    Dave, Jul 15, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    357
  2. Scott Cadillac
    Replies:
    0
    Views:
    345
    Scott Cadillac
    Oct 25, 2003
  3. Sky Sigal
    Replies:
    0
    Views:
    386
    Sky Sigal
    Jul 31, 2004
  4. someone
    Replies:
    0
    Views:
    336
    someone
    Mar 3, 2004
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,319
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page