Moving text with javascript

Discussion in 'Javascript' started by mmalloc@gmail.com, May 3, 2007.

  1. Guest

    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">
    <head><title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
    >

    <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;">&nbsp;</div>
    </div>
    </body>
    </html>
     
    , May 3, 2007
    #1
    1. Advertising

  2. RobG Guest

    On May 3, 6:42 pm, "" <> wrote:
    > 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';
    }
    }


    --
    Rob
     
    RobG, May 3, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dave
    Replies:
    4
    Views:
    552
    Siemel Naran
    May 21, 2004
  2. linkswanted
    Replies:
    0
    Views:
    946
    linkswanted
    Dec 21, 2007
  3. linkswanted
    Replies:
    0
    Views:
    1,576
    linkswanted
    Jan 6, 2008
  4. linkswanted
    Replies:
    0
    Views:
    453
    linkswanted
    Jan 23, 2008
  5. linkswanted
    Replies:
    0
    Views:
    637
    linkswanted
    Jan 24, 2008
Loading...

Share This Page