CSS + js not worknig!! :*( :( :'(

qqmm · 01-08-2007, 07:57 PM

Hey guys can someone please help me im using a div with a left css value of 200, what im trying to do in js is change this value either by adding or subtracting 1.

but becuase of my noobishness i cant seem to do it and worse i dont know why its not working the way im doing it.

Quote:

if(c == 1)
{
document.getElementById("leftImage").src = "images/leftOn.gif";
valueLeft = document.getElementById("scrollingDiv"). style.left;
document.getElementById("scrollingDiv"). style.left = valueLeft + 1 + "px";
}

please help me and explain to me what im missing, i been googling for a while and had no luck

david_kw · 01-08-2007, 08:32 PM

I haven't tested it but is valueLeft a string?

If so try.

valueLeft = parseInt(document.getElementById("scrollingDiv"). style.left);

david_kw

qqmm · 01-08-2007, 08:47 PM

thanks for the reply but no luck that didnt work

liorean · 01-08-2007, 08:58 PM

Have you set the value of style.left through script, or through <... style="left: number px;" ...> before you try this?

The style property only represents styles set on the actual element either inline in the document or through JavaScript.
Styles set in embedded or linked stylesheets for a selector matching the element will not be included in the style property, nor will default styles.

david_kw · 01-08-2007, 09:26 PM

I'm not sure why it isn't working for you. Once I add the parseInt it works for me.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Move Div</title>
    <script type="text/javascript">
    /* <![CDATA[ */
      function moveIt() {
        var valueLeft = parseInt(document.getElementById("adiv").style.left);
        document.getElementById("adiv").style.left = valueLeft + 100 + "px";
      } 
    /* ]]> */
    </script>
  </head>
  <body>
    <div>
      <button onclick="moveIt();">Do it</button>
      <br />
      <div id="adiv" style="position:fixed; left:100px; background-color:yellow;">Hi</div>
    </div>
  </body>
</html>

As a side note that doesn't seem to cause any problem in my test, but I just noticed that in your code on these lines

Code:

valueLeft = document.getElementById("scrollingDiv"). style.left;
document.getElementById("scrollingDiv"). style.left = valueLeft + 1 + "px";

You have a space before style and after the period. I don't know if it can cause a compatibility problem somewhere down the line.

david_kw

liorean · 01-08-2007, 09:45 PM

Quote:

Originally Posted by david_kw

You have a space before style and after the period. I don't know if it can cause a compatibility problem somewhere down the line.

Whitespace like that is entirely in it's order, it's allowed in the language specification and all scripting engines I've tried handle it perfectly fine. It only becomes a problem if property access or method calls are obscured by it so the programmer doesn't see what's actually happening. Like if there was a large comment block in between or the like.

david_kw · 01-08-2007, 10:49 PM

Ahh, good to know. Thanks. :)

david_kw