11521 sujets

JavaScript, DOM et API Web HTML5

Volet coulissant à gauche en jquery

Bonjour,

J'essaie avec beaucoup de difficulté de modifier le code d'un tuto que j'ai trouvé pour afficher un volet coulissant sur mon site. Dans le tuto le volet et à gauche et j'aimerai le mettre à droite.

Voici le code :
Html

<div id="resaslid">      
  <div class="panel">
    Sed venenatis congue fringilla. Fusce pellentesque dui vel tempus tristique. Quisque diam ligula, placerat non consequat vel, imperdiet a ante. Donec non consectetur felis. Proin sagittis a mauris non lobortis. Cras tincidunt vulputate eros, eget finibus libero pellentesque at. Nam ultricies maximus pulvinar. 
  </div>
  <div class="slide">MES INFOS</div>
</div>


Css

#resaslid { position:fixed; top:110px; left:-300px; z-index:1; }
.panel {
  border-radius: 0 0 10px 10px;
  background-color: papayaWhip;
  width:300px; height: 350px;
  padding: 30px;
}
.slide {
  border-radius: 0 0 10px 10px;
  background: tomato;
  color: #fff;
  padding: 10px;
	transform: rotate(270deg);
	position: absolute;
  top: 105px; left: 195px;
	width:250px; text-align:center;
  cursor: pointer;
}


Js

console.clear()
var $panel = $('#resaslid');
$(".slide").on("click", function(event) {
  event.preventDefault();
  console.info( $panel.offset().left )
  if ( $panel.offset().left == -300 ) {
    $panel.animate({left: "0"}, 400)
  } else {
    $panel.animate({left: "-300"}, 200)
  }
  $(this).toggleClass("active");
});


Le Js que j'ai modifié :

console.clear()
var $panel = $('#resaslid');
$(".slide").on("click", function(event) {
  event.preventDefault();
  console.info( $panel.offset().right )
  if ( $panel.offset().right == 0 ) {
    $panel.animate({right: "-300"}, 400)
  } else {
    $panel.animate({right: "0"}, 200) 
  }
  $(this).toggleClass("active");
});


Le volet s'ouvre mais ne se fermer pas, merci de votre aide.
Administrateur
Hello,

Les éléments sont placés selon le référentiel "left" dans le CSS aussi. As-tu remplacé les "left" par "right" dans les styles ?
Oui, en effet j'ai pas mis mon css, mais j'ai bien changé les left en right 


#resaslid { position:fixed; top:110px; right:-300px; z-index:1; }
.panel {
  border-radius: 0 0 10px 10px;
  background-color: papayaWhip;
  width:300px; height: 350px;
  padding: 30px;
}
.slide {
  border-radius: 10px 10px 0 0;
  background: tomato;
  color: #fff;
  padding: 10px;
  transform: rotate(270deg);
  position: absolute;
  top: 105px; 
  right: 195px;
  width:250px; 
  text-align:center;
  cursor: pointer;
}
Sujet clos
Aller à