Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    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

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't tested it but is valueLeft a string?

    If so try.

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

    david_kw

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply but no luck that didnt work

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by david_kw View Post
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh, good to know. Thanks. :)

    david_kw


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •