471,086 Members | 1,079 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

javascript changes based on the dtd????

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 not change anymore. This means the
javascript is changed based on the doctype?

Is this a bug?
Which functions and properties will change their behaviour in what doctype?
Do I miss something?
Is there a solution?
btw in firefox all works as expected
code:

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
-->
<html>
<head>
<script type="text/javascript">

function initPage(){
// set onmouse move event handler to capture the mouse
position
document.onmousemove=getMousePosition;

// get object
window.obj=document.getElementById('test');
}

function getMousePosition(e){
var x=(e &&
e.pageX)?e.pageX:event.x+document.body.scrollLeft;
var y=(e &&
e.pageY)?e.pageY:event.y+document.body.scrollTop;

window.obj.style.left=x+'px';
window.obj.style.top=y+'px';

document.getElementById('test').innerHTML="x="+x+" ,y="+y+',<br
/>(scrollLeft='+document.body.scrollLeft+',scrollTo p='+document.body.scrollTop+')';

}

window.onload=initPage;
</script>
</head>
<body>
<div id="test"
style="display:block;position:absolute;width:200px ;height:50px;border:1px
solid black;"></div>
<div style="width:200%">
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
Jul 23 '05 #1
4 1620


somebody wrote:
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 not change anymore. This means the
javascript is changed based on the doctype?

Is this a bug?
Which functions and properties will change their behaviour in what doctype?


IE 6 has two rendering modes, one called quirks mode, one called strict
mode (or called standards compliant mode), and the DOCTYPE declaration
decides on the rendering mode.
In strict mode the <html> element defines the canvas while in quirks
mode the <body> element does so if you use document.body.scrollTop/Left
in quirks mode in strict mode you need
document.documentElement.scrollTop/Left.

You can check
if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
// use document.documentElement.scrollTop/Left
}
else {
// use document.body.scrollTop/Left
}
More details on the rendering mode are here:
<http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp>

Note that Mozilla and Opera also switch rendering modes based on the
DOCTYPE declaration, for Mozilla see
<http://www.mozilla.org/docs/web-developer/faq.html>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

"Martin Honnen" <ma*******@yahoo.de> schreef in bericht
news:42***********************@newsread4.arcor-online.net...


somebody wrote:
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 not change anymore. This means
the javascript is changed based on the doctype?

Is this a bug?
Which functions and properties will change their behaviour in what
doctype?


IE 6 has two rendering modes, one called quirks mode, one called strict
mode (or called standards compliant mode), and the DOCTYPE declaration
decides on the rendering mode.
In strict mode the <html> element defines the canvas while in quirks mode
the <body> element does so if you use document.body.scrollTop/Left in
quirks mode in strict mode you need
document.documentElement.scrollTop/Left.

You can check
if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
// use document.documentElement.scrollTop/Left
}
else {
// use document.body.scrollTop/Left
}
More details on the rendering mode are here:
<http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp>

Note that Mozilla and Opera also switch rendering modes based on the
DOCTYPE declaration, for Mozilla see
<http://www.mozilla.org/docs/web-developer/faq.html>

--

Martin Honnen
http://JavaScript.FAQTs.com/


Thanks, thanks, thanks ......(1000 times)
Rob


Jul 23 '05 #3
somebody wrote:
"Martin Honnen" <ma*******@yahoo.de> schreef in bericht
news:42***********************@newsread4.arcor-online.net...

somebody wrote:

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 not change anymore. This means
the javascript is changed based on the doctype?

Is this a bug?
Which functions and properties will change their behaviour in what
doctype?


IE 6 has two rendering modes, one called quirks mode, one called strict
mode (or called standards compliant mode), and the DOCTYPE declaration
decides on the rendering mode.
In strict mode the <html> element defines the canvas while in quirks mode
the <body> element does so if you use document.body.scrollTop/Left in
quirks mode in strict mode you need
document.documentElement.scrollTop/Left.

You can check
if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
// use document.documentElement.scrollTop/Left
}
else {
// use document.body.scrollTop/Left
}
More details on the rendering mode are here:
<http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp>

Note that Mozilla and Opera also switch rendering modes based on the
DOCTYPE declaration, for Mozilla see
<http://www.mozilla.org/docs/web-developer/faq.html>

--

Martin Honnen
http://JavaScript.FAQTs.com/



Thanks, thanks, thanks ......(1000 times)


You may also want to check out this from the quirksmode site:

<URL:http://www.quirksmode.org/viewport/compatibility.html>
--
Rob
Jul 23 '05 #4
somebody wrote:
[...]
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 not change anymore. This means the
javascript is changed based on the doctype?
No, but the DOM probably is.
Is this a bug?
No.
Which functions and properties will change their behaviour in what
doctype?
Undefined.
Do I miss something?
Yes. There is the core language, and there is the DOM.
Is there a solution?
Declare the DOCTYPE properly and avoid proprietary references.
btw in firefox all works as expected
Shit happens.
code:

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
-->
You may want to explain what this is supposed to do.
[...]


PointedEars
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Andy Fish | last post: by
19 posts views Thread by dmiller23462 | last post: by
136 posts views Thread by Matt Kruse | last post: by
5 posts views Thread by petermichaux | last post: by

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.