DocType impact on javascript

[RK]

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.

 

[Martin Honnen]

...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