473,406 Members | 2,404 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > code works with html 4.0 transitional doctype, but not with xhtml 1.0 transitional

Join Bytes to post your question to a community of 473,406 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 3019
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

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

Similar topics

14
Script-generated code displaying differntly than the exact same code displayed staticly... help!?!?!
by: Akbar | last post by:
Hey there, Big-time curiosity issue here... Here's the test code (it's not that long)... it's to display a large number of image links with captions, ideally pulled in from an external file...
Javascript
20
Does IE have the same problems with XHTML 1.0 Transitional as it does with HTML Transitional?
by: Alan Silver | last post by:
Hello, I have read about the problems that IE has when using a doctype of HTML 4.01 Transitional. I was advised to use Strict wherever possible. My question is, does the same apply to XHTML...
HTML / CSS
11
Stopping Attributes.Add from converting my JavaScript event code to HTML
by: Nathan Sokalski | last post by:
I add several JavaScript events (onchange, onkeypress, etc.) to Controls using the Add method of the Attributes collection. However, if the JavaScript code contains certain characters, such as & or...
ASP.NET
4
What's wrong in this code ??
by: pamelafluente | last post by:
I am trying to pass a javascript variable to ASP. It almost works, except for the postback part. Infact if one clicks on the div and on the button it can be seen that the variable passes...
ASP.NET
6
Do I need <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ..... in asp.net 2.0 ?
by: Rolf Welskes | last post by:
Hello, if I have for example: <table style="width: 100%; height: 100%;" border="1"> <tr> <td style="width: 100px">k </td> <td style="width: 100px">k </td> </tr>
ASP.NET
1
ASP.NET 2.0 - Two ASPX files with one code file
by: rampabbaraju | last post by:
In my project I have two web pages with the same functionality, but the controls are placed in different places in each page. Application compiles and runs properly and produces the results I am...
ASP.NET
21
RFC: From XHTML to HTML via XSLT
by: =?iso-8859-2?Q?K=F8i=B9tof_=AEelechovski?= | last post by:
It is common knowledge that XHTML is better HTML and you can serve XHTML content as HTML. However, the second statement is incorrect, for various reasons; it is enough to say that the HTML...
HTML / CSS
27
correct equivalent construct for 1 line of code
by: pamela fluente | last post by:
Hello, for the following code, VS suggests that construct (width= height= ) is out of date and a newer one is recommended: <table><tr><td width="92" height="38" valign="middle">AnyThing</td></...
HTML / CSS
70
mideastgirl
Need help with scripting to store data on MySQL
by: mideastgirl | last post by:
I have recently been working on a website for an honors association, and have a lot of difficulty but have found help from those on this site. I would like to see if I can get some more help on a...
PHP
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Migrating Website to Cloud - Emmanuel Katto
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
General
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
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...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!