CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
QiMath
QiMath

Reputation: 585

JQuery UI Slide animation triggering the scrollbar to display during the animation

I'm trying to use JQuery UI's slide animation to toggle a div.
When a link is clicked, the div slide in the page from the right (as seen in this fiddle).

$("#toggle").click(function(event) {
  event.stopPropagation();
  $("#slider").toggle("slide", {
    direction: "right"
  }, 300);
});
#toggle {
  font-weight: bolder;
  cursor: pointer;
}
#slider {
  z-index: 100;
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 200px;
  padding: 20px;
  background: #DDD;
  border: 1px solid #000;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous">
  </script>
</head>

<body>
  <div id="toggle">
    click me to slide
  </div>
  <div id="slider">
    Slidin' in & Slidin' out
  </div>
</body>

</html>

The problem I have is this scrollbar that appears during the animation, I don't want it to be displayed, like in JQuery UI's website, they don't have this scrollbar issue and I don't know how they did it.

I would like to avoid wrapping #slider into another container if possible, and I can't set his parent to overflow: hidden neither at the moment.

Is there a simple way to fix this ?

Upvotes: 3

Views: 1323

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241238

The easiest solution is to set overflow: hidden on the body element. However, since you said that you can't do that, an alternative solution would be to animate the width of the element in order to make it appear like it is sliding in. In reality the width of the element is just increasing/decreasing from 0 and it is animated to make it look like it is sliding.

In jQuery you would do this with the .animate() method and you would set the value of width property to 'toggle'.

$("#toggle").click(function(event){
  event.stopPropagation();

  $("#slider").animate({
    width: 'toggle'
  }, 200);
});

In addition, you can also prevent the text from wrapping with white-space: nowrap.

See the full example below:

$("#toggle").click(function(event){
  event.stopPropagation();
  
  $("#slider").animate({
    width: 'toggle'
  }, 200);
});
#toggle {
  font-weight: bolder;
  cursor: pointer;
}

#slider {
  white-space: nowrap;
  z-index: 100;
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
  height: 200px;
  padding: 20px;
  background: #DDD;
  border: 1px solid #000;
}
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="toggle">
    click me to slide
  </div>
  <div id="slider">
    Slidin' in & Slidin' out
  </div>
</body>
</html>

Upvotes: 2

Related Questions