title: Buttons that move a DIV left or right
body: <p>I am attempting to make a div scroll left or right either with a mouseover effect or on-click. However, I am at a loss as to what is going wrong.</p>
  
  <p>Here was my attempt to do this simply:</p>
  
  <pre><code> &lt;head&gt;
      &lt;style&gt;
      #innerscroll{
      margin-right:0px;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="innerscroll"&gt;&lt;/div&gt;
  &lt;img src="right.jpg" 
  onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now, trying this, I'm wondering why it doesn't work. What am I doing wrong? </p>
  
  <p>I also tried a more complex approach that also failed. Here's the code for that:  </p>
  
  <pre><code>    $('.nav-next').click(function(e) {
          e.preventDefault();
          $('#innerscroll').animate({
              'margin-right' : '100px'    
          });                 
      });
      $('.nav-previous').click(function(e) {
          e.preventDefault();
          $('#innerscroll').animate({
              'margin-right' : '-100px'
          });                 
      });
  </code></pre>
  
  <p>My last question was closed because I guess I was not specific enough. Whatever details you need please ask for and I'll edit the question! </p>
  
  <p>Edit: I have the option of using jQuery but I would rather not. </p>
  
  <p>Edit2: I am using setInterval to time the mouseover effect. I am thinking that it will move via mouseover or it will move via a click event. </p>