471,122 Members | 1,148 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

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

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
14 2815
mrhoo
428 256MB
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
tader
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
tader
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
16,027 Expert Mod 8TB
Can you show what code you've tried?

PS. changed the thread title to better describe the problem.
Oct 19 '07 #5
tader
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
16,027 Expert Mod 8TB
Move the onmousedown in the slater div into an onload.
Oct 20 '07 #7
tader
43
sorry did not understand can you show me an example?
Oct 20 '07 #8
acoder
16,027 Expert Mod 8TB
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
tader
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
16,027 Expert Mod 8TB
In your HTML code you have:
[HTML]<div id="slater" onMouseDown="startDrag()"></div>[/HTML] Have you removed the onMouseDown?
Oct 21 '07 #11
tader
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
16,027 Expert Mod 8TB
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
tader
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
16,027 Expert Mod 8TB
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.

Similar topics

4 posts views Thread by pamelafluente | last post: by
1 post views Thread by rampabbaraju | last post: by
21 posts views Thread by =?iso-8859-2?Q?K=F8i=B9tof_=AEelechovski?= | last post: by
27 posts views Thread by pamela fluente | 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.