By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,191 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

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

P: 43
so i got script like that

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Drag and Drop</title>
<style>
#slater {
display:block;
width:13px;
height:22px;
background:url(slater.gif);
cursor:pointer;
position:relative;
border:0px;
}
#main_box {
position:relative;
width:113px;
height:22px;
background:url(background_slate.jpg) no-repeat;
border:0px;
}
</style>
<script>

if (navigator.appName == "Microsoft Internet Explorer") { var Browser = "IE"; } else { var Browser = "FF"; }
var MoveIT = "";

function startDrag() {
OffsetX = MouseX - (document.getElementById('slater').style.left).rep lace("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.re place("px","") <= 0) {
document.getElementById('slater').style.left = 0+"px";
} else if ((document.getElementById('slater').style.left.rep lace("px","")) >= 100) {
document.getElementById('slater').style.left = 100+"px";
}

var speed = document.getElementById('slater').style.left.repla ce("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.re place("px","") <= 0) {
document.getElementById('slater').style.left = 0+"px";
} else if ((document.getElementById('slater').style.left.rep lace("px","")) >= 100) {
document.getElementById('slater').style.left = 100+"px";
}

var speed = document.getElementById('slater').style.left.repla ce("px","") / 10;
document.getElementById('speed').innerHTML = speed;
}
}

if (Browser == "IE") { document.onmousemove = mouseMoveIE; } else { document.onmousemove = mouseMoveFF; }
document.onmouseup = function () { MoveIT = ""; }

</script>
</head>
<body>

<div id="main_box">
<div id="slater" onMouseDown="startDrag()"></div>
</div>
<div id="speed" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666666;">0</div>
</body>
</html>
[/HTML]
so it works file but this is my problem it's made on <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> HTML 4.0 Transitional i need it to be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but this i my problem when i change HTML 4.0 Transitional to XHTML 1.0 Transitional it stops working so can some one tell me how to make my script work with XHTML 1.0 Transitional (on ie XHTML 1.0 Transitional works but not on FF)
Oct 17 '07 #1
Share this Question
Share on Google+
14 Replies


100+
P: 428
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.
Oct 17 '07 #2

P: 43
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.dtd">
<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="javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="css.css" />

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

have any ideas hat to do now??
but on ie it works
Oct 17 '07 #3

P: 43
onload is not working or ma bey im not using it right can you tell me how to use it???
Oct 19 '07 #4

acoder
Expert Mod 15k+
P: 16,027
Can you show what code you've tried?

PS. changed the thread title to better describe the problem.
Oct 19 '07 #5

P: 43
HTML Code:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="css.css" />

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

Javascript code:
Expand|Select|Wrap|Line Numbers
  1. if (navigator.appName == "Microsoft Internet Explorer") { var Browser = "IE"; } else { var Browser = "FF"; }
  2. var MoveIT = "";
  3.  
  4. function startDrag() {
  5.     OffsetX = MouseX - (document.getElementById('slater').style.left).replace("px","");
  6.     MoveIT = "yes";
  7. }
  8.  
  9. function mouseMoveFF(event) {
  10.     MouseX = event.clientX;
  11.     if (MoveIT == "yes") {
  12.         document.getElementById('slater').style.left = MouseX - OffsetX;
  13.  
  14.         if(document.getElementById('slater').style.left.replace("px","") <= 0) {
  15.             document.getElementById('slater').style.left = 0+"px";
  16.         } else if ((document.getElementById('slater').style.left.replace("px","")) >= 100) {
  17.             document.getElementById('slater').style.left = 100+"px";
  18.         }
  19.  
  20.         var speed = document.getElementById('slater').style.left.replace("px","") / 10;
  21.         var fix_pt = (document.getElementById('slater').style.left != "0pt") ? speed : '0';
  22.         document.getElementById('speed').innerHTML = fix_pt;
  23.     }
  24. }
  25.  
  26. function mouseMoveIE() {
  27.     MouseX = event.clientX;
  28.     if (MoveIT == "yes") {
  29.         document.getElementById('slater').style.left = MouseX - OffsetX;
  30.  
  31.         if(document.getElementById('slater').style.left.replace("px","") <= 0) {
  32.             document.getElementById('slater').style.left = 0+"px";
  33.         } else if ((document.getElementById('slater').style.left.replace("px","")) >= 100) {
  34.             document.getElementById('slater').style.left = 100+"px";
  35.         }
  36.  
  37.         var speed = document.getElementById('slater').style.left.replace("px","") / 10;
  38.         document.getElementById('speed').innerHTML = speed;
  39.     }
  40. }
  41.  
  42. if (Browser == "IE") {  document.onmousemove = mouseMoveIE; } else { document.onmousemove = mouseMoveFF; }
  43. document.onmouseup = function () { MoveIT = ""; }
  44.  
So like i sad before on ie it works but not on ff. I just cant find the bug
Oct 20 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Move the onmousedown in the slater div into an onload.
Oct 20 '07 #7

P: 43
sorry did not understand can you show me an example?
Oct 20 '07 #8

acoder
Expert Mod 15k+
P: 16,027
sorry did not understand can you show me an example?
For example:
Expand|Select|Wrap|Line Numbers
  1. window.onload=function() {
  2. document.getElementById("slater").onmousedown=startDrag;
  3. }
You could use addEventListener/attachEvent instead.
Oct 20 '07 #9

P: 43
Expand|Select|Wrap|Line Numbers
  1. window.onload = function() {
  2.     if (Browser == "IE") {  
  3.         document.getElementById("slater").onmousemove = mouseMoveIE; 
  4.     } else { 
  5.         document.getElementById("slater").onmousemove = mouseMoveFF; 
  6.     }
  7. }
i did it like this bus it still is not working
Oct 21 '07 #10

acoder
Expert Mod 15k+
P: 16,027
In your HTML code you have:
[HTML]<div id="slater" onMouseDown="startDrag()"></div>[/HTML] Have you removed the onMouseDown?
Oct 21 '07 #11

P: 43
i dind remove this onmousedown=startdarg();
heres my javascript
still it's nowworking on ff but working on ie
Expand|Select|Wrap|Line Numbers
  1. if (navigator.appName == "Microsoft Internet Explorer") { var Browser = "IE"; } else { var Browser = "FF"; }
  2. var MoveIT = "";
  3.  
  4. function startDrag() {
  5.     OffsetX = MouseX - (document.getElementById('slater').style.left).replace("px","");
  6.     MoveIT = "yes";
  7. }
  8.  
  9. function mouseMoveFF(event) {
  10.     MouseX = event.clientX;
  11.     if (MoveIT == "yes") {
  12.         document.getElementById('slater').style.left = MouseX - OffsetX;
  13.  
  14.         if(document.getElementById('slater').style.left.replace("px","") <= 0) {
  15.             document.getElementById('slater').style.left = 0+"px";
  16.         } else if ((document.getElementById('slater').style.left.replace("px","")) >= 100) {
  17.             document.getElementById('slater').style.left = 100+"px";
  18.         }
  19.  
  20.         var speed = document.getElementById('slater').style.left.replace("px","") / 10;
  21.         var fix_pt = (document.getElementById('slater').style.left != "0pt") ? speed : '0';
  22.         document.getElementById('speed').innerHTML = fix_pt;
  23.     }
  24. }
  25.  
  26. function mouseMoveIE() {
  27.     MouseX = event.clientX;
  28.     if (MoveIT == "yes") {
  29.         document.getElementById('slater').style.left = MouseX - OffsetX;
  30.  
  31.         if(document.getElementById('slater').style.left.replace("px","") <= 0) {
  32.             document.getElementById('slater').style.left = 0+"px";
  33.         } else if ((document.getElementById('slater').style.left.replace("px","")) >= 100) {
  34.             document.getElementById('slater').style.left = 100+"px";
  35.         }
  36.  
  37.         var speed = document.getElementById('slater').style.left.replace("px","") / 10;
  38.         document.getElementById('speed').innerHTML = speed;
  39.     }
  40. }
  41.  
  42. window.onload = function() {
  43.     if (Browser == "IE") {  
  44.         document.getElementById("slater").onmousemove = mouseMoveIE; 
  45.     } else { 
  46.         document.getElementById("slater").onmousemove = mouseMoveFF; 
  47.     }
  48. }
  49.  
  50.  
  51. document.onmouseup = function () { MoveIT = ""; }
  52.  
Oct 21 '07 #12

acoder
Expert Mod 15k+
P: 16,027
i dind remove this onmousedown=startdarg();
heres my javascript
still it's nowworking on ff but working on ie
You'll need to add the onmousedown to the onload too.
Oct 21 '07 #13

P: 43
if i do it like this
Expand|Select|Wrap|Line Numbers
  1. window.onload = function() {
  2.     document.getElementById("slater").onmousedown = startdarg; 
  3.     if (Browser == "IE") {  
  4.         document.getElementById("slater").onmousemove = mouseMoveIE; 
  5.     } else { 
  6.         document.getElementById("slater").onmousemove = mouseMoveFF; 
  7.     }
  8. }
  9.  
it will not work nor even on ie
Oct 22 '07 #14

acoder
Expert Mod 15k+
P: 16,027
The onmousemove should probably be on the document:
Expand|Select|Wrap|Line Numbers
  1. document.onmousemove = ...
as you originally had it.

It's startDrag (JavaScript is case-sensitive).
Oct 22 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.