Code works with HTML 4.0 Transitional DOCTYPE, but not with XHTML 1.0 Transitional

**mrhoo** · Oct 17 '07, 01:16 PM

Take the script out of the html and link to it with
<script type="text/javascript" src=></script> in the head, and include a title element in the head.
put the event assignment in an onload call in the remote script.

**tader** · Oct 17 '07, 02:01 PM

i did like this and it still not working
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Drag</title>
<script type="text/javascript" language="javas cript" src="script.js" ></script>
<link type="text/css" rel="stylesheet " href="css.css" />

</head>
<body>
<div id="main_box">
<div id="slater" onMouseDown="st artDrag()"></div>
</div>
<div id="speed">0</div>
</body>
</html>
[/HTML]

have any ideas hat to do now??
but on ie it works

**tader** · Oct 19 '07, 06:04 PM

onload is not working or ma bey im not using it right can you tell me how to use it???

**acoder** · Oct 19 '07, 06:41 PM

Can you show what code you've tried?

PS. changed the thread title to better describe the problem.

**tader** · Oct 20 '07, 07:29 AM

HTML Code:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Drag</title>
<script type="text/javascript" language="javas cript" src="script.js" ></script>
<link type="text/css" rel="stylesheet " href="css.css" />

</head>
<body>
<div id="main_box">
<div id="slater" onMouseDown="st artDrag()"></div>
</div>
<div id="speed">0</div>
</body>
</html>
[/HTML]

Javascript code:

Code:

if (navigator.appName == "Microsoft Internet Explorer") { var Browser = "IE"; } else { var Browser = "FF"; }
var MoveIT = "";
	
function startDrag() {
	OffsetX = MouseX - (document.getElementById('slater').style.left).replace("px","");
	MoveIT = "yes";
}
		
function mouseMoveFF(event) {
	MouseX = event.clientX;
	if (MoveIT == "yes") {
		document.getElementById('slater').style.left = MouseX - OffsetX;

		if(document.getElementById('slater').style.left.replace("px","") <= 0) {
			document.getElementById('slater').style.left = 0+"px";
		} else if ((document.getElementById('slater').style.left.replace("px","")) >= 100) {
			document.getElementById('slater').style.left = 100+"px";
		}

		var speed = document.getElementById('slater').style.left.replace("px","") / 10;
		var fix_pt = (document.getElementById('slater').style.left != "0pt") ? speed : '0';
		document.getElementById('speed').innerHTML = fix_pt;
	}
}
	
function mouseMoveIE() {
	MouseX = event.clientX;
    if (MoveIT == "yes") {
		document.getElementById('slater').style.left = MouseX - OffsetX;
			
		if(document.getElementById('slater').style.left.replace("px","") <= 0) {
			document.getElementById('slater').style.left = 0+"px";
		} else if ((document.getElementById('slater').style.left.replace("px","")) >= 100) {
			document.getElementById('slater').style.left = 100+"px";
		}
			
		var speed = document.getElementById('slater').style.left.replace("px","") / 10;
		document.getElementById('speed').innerHTML = speed;
    }
}
	
if (Browser == "IE") {  document.onmousemove = mouseMoveIE; } else { document.onmousemove = mouseMoveFF; }
document.onmouseup = function () { MoveIT = ""; }

So like i sad before on ie it works but not on ff. I just cant find the bug

**acoder** · Oct 20 '07, 11:17 AM

Move the onmousedown in the slater div into an onload.

**tader** · Oct 20 '07, 12:33 PM

sorry did not understand can you show me an example?

**acoder** · Oct 20 '07, 01:05 PM

Originally posted by tader

sorry did not understand can you show me an example?

For example:
[CODE=javascript]window.onload=f unction() {
document.getEle mentById("slate r").onmousedown =startDrag;
}[/CODE] You could use addEventListene r/attachEvent instead.

**tader** · Oct 21 '07, 07:48 AM

[CODE=javascript]
window.onload = function() {
if (Browser == "IE") {
document.getEle mentById("slate r").onmousem ove = mouseMoveIE;
} else {
document.getEle mentById("slate r").onmousem ove = mouseMoveFF;
}
}[/CODE]
i did it like this bus it still is not working

**acoder** · Oct 21 '07, 01:25 PM

In your HTML code you have:
[HTML]<div id="slater" onMouseDown="st artDrag()"></div>[/HTML] Have you removed the onMouseDown?

**tader** · Oct 21 '07, 01:41 PM

i dind remove this onmousedown=sta rtdarg();
heres my javascript
still it's nowworking on ff but working on ie
[CODE=javascript]
if (navigator.appN ame == "Microsoft Internet Explorer") { var Browser = "IE"; } else { var Browser = "FF"; }
var MoveIT = "";

function startDrag() {
OffsetX = MouseX - (document.getEl ementById('slat er').style.left ).replace("px", "");
MoveIT = "yes";
}

function mouseMoveFF(eve nt) {
MouseX = event.clientX;
if (MoveIT == "yes") {
document.getEle mentById('slate r').style.left = MouseX - OffsetX;

if(document.get ElementById('sl ater').style.le ft.replace("px" ,"") <= 0) {
document.getEle mentById('slate r').style.left = 0+"px";
} else if ((document.getE lementById('sla ter').style.lef t.replace("px", "")) >= 100) {
document.getEle mentById('slate r').style.left = 100+"px";
}

var speed = document.getEle mentById('slate r').style.left. replace("px","" ) / 10;
var fix_pt = (document.getEl ementById('slat er').style.left != "0pt") ? speed : '0';
document.getEle mentById('speed ').innerHTML = fix_pt;
}
}

function mouseMoveIE() {
MouseX = event.clientX;
if (MoveIT == "yes") {
document.getEle mentById('slate r').style.left = MouseX - OffsetX;

if(document.get ElementById('sl ater').style.le ft.replace("px" ,"") <= 0) {
document.getEle mentById('slate r').style.left = 0+"px";
} else if ((document.getE lementById('sla ter').style.lef t.replace("px", "")) >= 100) {
document.getEle mentById('slate r').style.left = 100+"px";
}

var speed = document.getEle mentById('slate r').style.left. replace("px","" ) / 10;
document.getEle mentById('speed ').innerHTML = speed;
}
}

window.onload = function() {
if (Browser == "IE") {
document.getEle mentById("slate r").onmousem ove = mouseMoveIE;
} else {
document.getEle mentById("slate r").onmousem ove = mouseMoveFF;
}
}

document.onmous eup = function () { MoveIT = ""; }
[/CODE]

**acoder** · Oct 21 '07, 02:29 PM

Originally posted by tader

i dind remove this onmousedown=sta rtdarg();
heres my javascript
still it's nowworking on ff but working on ie

You'll need to add the onmousedown to the onload too.

**tader** · Oct 22 '07, 05:12 PM

if i do it like this
[CODE=javascript]
window.onload = function() {
document.getEle mentById("slate r").onmoused own = startdarg;
if (Browser == "IE") {
document.getEle mentById("slate r").onmousem ove = mouseMoveIE;
} else {
document.getEle mentById("slate r").onmousem ove = mouseMoveFF;
}
}
[/CODE]
it will not work nor even on ie

**acoder** · Oct 22 '07, 05:37 PM

The onmousemove should probably be on the document:

Code:

document.onmousemove = ...

as you originally had it.

It's startDrag (JavaScript is case-sensitive).

Code works with HTML 4.0 Transitional DOCTYPE, but not with XHTML 1.0 Transitional

Code works with HTML 4.0 Transitional DOCTYPE, but not with XHTML 1.0 Transitional

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment