title: Slide div from right to left
body: <p>I the below example, when I click on link <code>message-window</code> the div slides from left to right, but when I change its property <code>left:-100px</code> to <code>right:-100px</code> the slide works but a horizontal scroll appears. How can we prevent the horizontal scroll appearing?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="message-window"&gt;Here I am !&lt;/div&gt;
  &lt;div class="red-box"&gt;Fixed div&lt;/div&gt;
  
  &lt;a href="#" class="photo-details-messages" style="position:absolute; top:400px"&gt;Show/hide Slide Panel&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.red-box, .message-window {
      height:350px;
  }
  
  .red-box {
      width: 100%;
      background: red;
      z-index:1;
      position:absolute;
  }
  
  .message-window {
      width:100%;
      z-index:2;
      position:absolute;
      left:-100%;
      background:#f90;
      color:#000;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $('.photo-details-messages').click(function(){
      var hidden = $('.message-window');
      if (hidden.hasClass('visible')){
          hidden.animate({"left":"-100%"}, "slow").removeClass('visible');
      } else {
          hidden.animate({"left":"0px"}, "slow").addClass('visible');
      }
      });
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/alpeshlahad/0h5rhsrk/" rel="nofollow">Here is a jsfiddle</a></p>