How to access css elements with JavaScript for Firefox and Netscape browsers?

Discussion in 'JavaScript' started by YourChild, Jan 7, 2008.

  1. #1
    Hi I am fairly new to JavaScript and I've got a really simple question. Its so elementary it is almost rediculous.

    I got a piece of html that contains a form which holds a picture. the picture is inside a <span> tag. The form also contains a button which calls a javascript function. When the user clicks the button, the javaScript will cause the image to move to the right some X pixels. this works fine on the IE browser. It doesnt work on Firefox and NEtscape.

    Here is the code for the html:


    <form name = "myForm">
    <input type = "button" value = "Move the object" onClick = "moveObject()">

    <span name = "submarine" id = "submarine"
    style = "position: absolute;
    left: 50px;
    top: 200px;
    height: 30;
    width: 30;">
    <img src = "images/sub.gif" id="test">
    </span>
    </form>




    And here is the javaScript that handles the onClick event:

    function moveObject(){
    document.getElementById('submarine').style.pixelLeft += 20;
    }



    I realize that the javaScript coding for Firefox and Netscape browsers may be a little different...as in the way to access the 'submarine' element from the document object, but I've tried so many different ways and still couldnt' get it to work.

    The book I'm using was published in 2001 so it might be a little outdated. Anyways, it says to access the submarine element by doing:

    function moveObject(){

    document.submarine.moveBy(20,0);
    }



    This didnt work for all 3 browsers. THe firebug on Firefox said, "submarine has no properties." I guess this book is really old school news.

    Any help is gladly appreciated thanks.
     
    YourChild, Jan 7, 2008 IP
  2. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The first function isn't working?

    function moveObject(){
    document.getElementById('submarine').style.pixelLeft += 20;
    }
     
    MMJ, Jan 8, 2008 IP
  3. WebGyver

    WebGyver Guest

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    OK, first of all, change the <span> to a <div> or <p>, but leave the style attributes as you have them right now for the <span>. (Actually, you should be able to use the <img> tag without any additional containers.)


    Next, forget the pixelLeft attribute; it might work in some versions of IE but not in Firefox. Instead, use:


    function moveObject(){
    // GET A REFERENCE TO THE PAGE ELEMENT:
    var theEl = document.getElementById('submarine');

    // GET THE CURRENT "LEFT" VALUE:
    var leftVal = theEl.style.left;

    // THAT GIVES YOU SOMETHING LIKE "50px"

    // NOW WE WANT TO GET THE ACTUAL PIXEL AMOUNT (WITHOUT PX):
    var lenLeftVal = leftVal.length;
    leftVal = leftVal.substr(0,lenLeftVal - 2);

    // FINALLY, ADD THE DISTANCE YOU WANT THE OBJECT TO MOVE:
    // BY THE WAY, THE VARIABLE leftVal IS ACTUALLY A STRING,
    // SO YOU WANT TO MAKE SURE IT GETS USED AS A NUMBER (integer)
    // WHEN YOU DO THE CALULATION
    var newLeftVal = parseInt(leftVal) + 50;

    // AND NOW YOU CAN MOVE THE OBJECT (DON'T FORGET TO ADD THE "PX" BACK):
    theEl.style.left = newLeftVal + "px";
    }
     
    WebGyver, Jan 8, 2008 IP
  4. kow

    kow Member

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    This is unnecessary, because parseInt makes "50px" int 50. Try it.

    Nice solution BTW
     
    kow, Jan 11, 2008 IP