CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
kulotskie
kulotskie

Reputation: 331

sliding panel from left to right side

I have a panel and its positioned in the left side I tried to reposition it from the left to the right side can anyone me here my Fiddle thank you.

here is the mark up and my js

$(function(){
	$(document).on('click','.slider-arrow.show',function(){
	    $( ".slider-arrow, .panel" ).animate({
          left: "+=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('«').removeClass('show').addClass('hide');
    });
	
	$(document).on('click','.slider-arrow.hide',function(){
	    $( ".slider-arrow, .panel" ).animate({
          left: "-=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('»').removeClass('hide').addClass('show');
    });
});
.panel {
	width:300px;
	float:left;
	height:550px;
	background:#d9dada;
	position:relative;
	left:-300px;

}
.slider-arrow {
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
      </div>
      
      <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

Upvotes: 0

Views: 2767

Answers (1)

Jack Guy
Jack Guy

Reputation: 8523

It's mostly just changing left to right with your float and left position attributes. There are better ways to approach this problem, generally using position: absolute, but this works too.

body {
    overflow: hidden;
}

Will prevent there from being a horizontal scrollbar on the page.

https://jsfiddle.net/v58eozu1/2/

Upvotes: 2

Related Questions