Slide Div From Right To Left

I the below example, when I click on link message-window the div slides from left to right, but when I change its property left:-100px to right:-100px the slide works but a horizon

Solution 1:

Create a wrapper div with height and width, set the overflow property to hidden in order to get rid of the horizontal scroll issue.

HTML:

<divid="container"><divclass="message-window">Here I am !</div><divclass="red-box">Fixed div</div></div><ahref="#"class="photo-details-messages"style="position:absolute; top:400px">Show/hide Slide Panel</a>

CSS:

#container{
  width:100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.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;
}

JS:

$(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":"0"}, "slow").addClass('visible');
    }
    });
});

check this

Solution 2:

You need to add 2 small changes

<divclass="rel"><divclass="message-window">Here I am !</div><divclass="red-box">Fixed div</div></div>

and in CSS

.rel{
  overflow-x: hidden;
  position:relative;
  height:350px;
  width:100%;
}