Moving text with javascript

mmalloc · May 3, 2007

I have the following code to move some text with javascript that works
both on ie and ff. I can't make it XHTML compatble. If i remove the
doctype info it will work. I'm sorry to bother with such simple
question but is there someone to see where am i wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function TextMove(val) {
try {
var divObj = document.getElementById("mouseCoord");
divObj.innerHTML = "Moving";
divObj.style.left=parseInt(val);
}
catch (ex) { alert (ex); }
}
</script>
</head>
<body onload="TextMove(0);">
<div>
<div id="mouseCoord" onmouseover="TextMove(10);"
onmouseout="TextMove(0);" style="position:relative;"> </div>
</div>
</body>
</html>

RobG · May 3, 2007

I have the following code to move some text with javascript that works
both on ie and ff. I can't make it XHTML compatble. If i remove the
doctype info it will work. I'm sorry to bother with such simple
question but is there someone to see where am i wrong?

Use HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>title</title>

Use 2 spaces for indenting posted code, it doesn't wrap quite so
readily.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

<script type="text/javascript">
function TextMove(val) {
try {
var divObj = document.getElementById("mouseCoord");

try...catch should be reserved as an absolute last resort - feature
detection is much preferred:

var divObj;
if (!document.getElementById ||
!(divObj = document.getElementById("mouseCoord"))) {
return;
}

divObj.innerHTML = "Moving";

If you really are using XHTML (i.e. you are serving it as application/
xml), then you probably shouldn't be using innerHTML. There's no
standard for innerHTML, so whether it *should* work with XHTML or not
is moot - but it comes from a company whose browser doesn't understand
XML.

I would try straight DOM methods:

while (divObj.firstChild) {
divObj.removeChild(divObj.firstChild);
}
divObj.appendChild(document.createTextNode('Moving'));

Though the innerHTML alternative worked fine for me in Safari and
Firefox.

divObj.style.left=parseInt(val);

The style object's left property expects to get a string value, and
any value other than zero must have a unit (I'll assume you want px):

divObj.style.left = val + 'px';

Here's the function in one piece:

function TextMove(val) {
var divObj;

// Feature test
if ( document.getElementById &&
(divObj = document.getElementById("mouseCoord"))) {

// Remove contents
while (divObj.firstChild) {
divObj.removeChild(divObj.firstChild);
}

// Add required text
divObj.appendChild(document.createTextNode('Moving'));

// Jiggle the element
divObj.style.left = val + 'px';
}
}

Help with code	0	Jun 12, 2022
Check forms With JavaScript	1	Mar 28, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
How do I hide the modal after 5 seconds?	4	Jun 1, 2023
Help with my responsive home page	2	Dec 14, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Problem with javascript function call	7	Oct 9, 2011
javascript not executed from the innerHTML	1	Dec 8, 2006

Moving text with javascript

mmalloc

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads