| Register | FAQ | Calendar | Search | Today's Posts | Mark Forums Read |
|
#1
| |||
| |||
| 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. |
|
#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....7s_Quirks_Mode -- Martin Honnen http://JavaScript.FAQTs.com/ |
![]() |
| Thread Tools | |
| Display Modes | |
In an effort to better serve ads to our visitors, cookies are used on objectmix.com. For more information, check out our Privacy Policy.