473,402 Members | 2,046 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,402 software developers and data experts.

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.

Nov 10 '08 #1
1 1857
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/
Nov 10 '08 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: somebody | last post by:
Hello all, I created a function which gets the position of the mouse. This works fine untill I insert a doctype declaration in the file. The properties 'scrollLeft' and 'scrollTop' in IE will...
5
by: Steve | last post by:
I just noticed, in IE6, when navagating from one page to another with the same basic layout (centered top graphic, for example), that a page with a <script> block in the <head> shifts the HTML...
1
by: Sugapablo | last post by:
I have the following script (below). If I have the DOCYPE at the top, tDIV.style.top and tDIV.style.left don't return a value. If I remove the DOCTYPE from the first line, it works fine and...
9
by: bert76 | last post by:
can anyone suggest a couple of websites providing *compatible* javascript? of course there is http://javascript.internet.com/ http://javascriptkit.com/ and the likes, but time and again you have...
6
by: reynard | last post by:
I have a page that uses this doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> but when I change to this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
24
by: Jim Michaels | last post by:
I can't get any "universal" code working that tries to detect whether the document it's in is xhtml or html. I found this, which tells me I have a hill to climb with no equipment....
0
by: =?Utf-8?B?SGFyZHkgV2FuZw==?= | last post by:
Hi all, I have a web form, and I want to use ModalPopupExtender from Ajax Toolkit. I am using IE 7.0 as browser, VS 2005 and Ajax and Ajax Tool Kit installed. Windows XP Pro. Now I have a...
1
by: rfr | last post by:
Apparently the Transitional Doctype kills this script because the script does not make proper use of units like "px". It works well without a doctype statement. But once someone adds a...
4
maxamis4
by: maxamis4 | last post by:
I currently have an input form in HTML. I am trying to use JavaScript to validate that the html forms are entered. I had it working earlier today but now my form is not validating. Could someone take...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.