473,383 Members | 1,815 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,383 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 1674


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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Andy Fish | last post by:
Hi, I am in the process of designing a UI which has to be fairly sophisticated. There will be a number of list boxes and other controls, with pop-up windows to edit certain properties. It's the...
14
by: John Bentley | last post by:
Note this is crossposted to comp.lang.javacript and microsoft.public.dotnet.scripting. After some Googling and FAQing my understanding of these terms is, crudely: Javascript (3 different...
19
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...
7
by: Privacy Advocate | last post by:
//crossposted to: comp.lang.javascript, alt.comp.lang.javascript in an effort to get factual answers from JavaScript experts// Simply put; Is it possible to obtain the real (actual) IP address of...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
5
by: petermichaux | last post by:
Hi, Some servers return JavaScript as the response to an AJAX request. When the response JavaScript is eval'ed it calls other JavaScript functions already in the browser to update elements, etc....
6
by: lucyh3h | last post by:
Hi, In one of my pages, I use javascript (AJAX) to populate one mulitple select field based on user's click event on another control. I noticed that when I navigate back to this page by clicking...
15
by: fanchun | last post by:
I already built 2 javacript files factor.js and parm.js. factor.js is an array, having several factor as elements. for example, factor.js looks like: var factor= parm.js is also an array, having...
22
by: Dan Rumney | last post by:
Hi all, I've been writing Javascript for quite a while now and have, of late, been writing quite a lot of AJAX and AJAX-related code. In the main, my dynamically generated pages are created...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
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
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...

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.