title: Style.width and left doesn't work
body: <p>I want to make the effect of a "photo strip" in a menu div with this background</p>
  
  <p><a href="http://3.bp.blogspot.com/_Y_uUwNwvSU8/SJUSQzlYMXI/AAAAAAAAAA8/5IYVcaRaJDA/S660/tira%2Bfotografica.jpg" rel="nofollow">http://3.bp.blogspot.com/_Y_uUwNwvSU8/SJUSQzlYMXI/AAAAAAAAAA8/5IYVcaRaJDA/S660/tira%2Bfotografica.jpg</a></p>
  
  <p>Im changing the width and left of the div to simulate this effect with javascript/jquery but it doesn't work this way, for now is "onclick" but i want to make it automatically may be with <strong>setInterval</strong>?</p>
  
  <p><strong>Here's the HTML Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Prueba&lt;/title&gt;
      &lt;link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css"&gt;
      &lt;script type = "text/javascript" src = "jquery-2.1.4.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              var slider = document.getElementById("#slider");
              var speed = 10;
              $("#slider").click(function(){
                  slider.style.width = (slider.style.width+speed)+"px";
                  slider.style.left = (slider.style.left-speed)+"px";
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id = "wrapper"&gt;
          &lt;div id = "slider"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>And here's the CSS Code:</strong> </p>
  
  <pre><code>*{
      padding: 0;
      margin: 0;
  }
  
  #slider {
      padding: 0;
      margin: 0;
      background-color: black;
      background-image: url("TiraFotografica.PNG");
      background-repeat: repeat;
      width: 800px;
      height: 304px;
      position: relative;
      overflow: hidden;
  }
  
  #wrapper {
      width: 800px;
      height: 1000px;
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
  }
  </code></pre>
  
  <p>I tried anothers different ways, like <strong>window.onload</strong>, putting the code after all in <strong>body</strong>, trying $(object).width, etc.. the problem is that when i click this doesn't move, then later i'll try to do automatically..</p>
  
  <p><strong>I have another doubt, this menu will get divs inside (options), when i make this div ("#slider") move, those divs moves too (the options)?</strong></p>
  
  <p><strong>EDIT: I added this by DinoMyte</strong></p>
  
  <pre><code>var speed = 10;
  $("#slider").click(function(){
      $(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
      $(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
  });
  </code></pre>
  
  <p><strong>Now it works fine, just need to make this automatically without clicks</strong></p>
  
  <p><strong>sorry for my bad english..</strong></p>