CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Mayron
Mayron

Reputation: 2394

jQuery-UI resizable bug with slide animation

I cannot seem to figure out what the jQueryUI resizable function is doing to cause the anchor point of the "chat box" div element I've created. The problem is that when you resize this element by dragging the top right corner, it does resize correctly, but when you press the close button to play the jQuery animation to collapse it, it will collapse in the wrong direction. If you do not resize the box at all then this collapse animation works correctly.

There seems to be another problem where resizing it causes the box to jump higher on the page, but this only seems to happen on Google Chrome, Firefox works fine, and not sure why!

Try resizing the box and then closing it to see the problem:

$(document).ready(function() {
  // controls resizing of the chat box
  $('.chat_box').resizable({
    handles: 'n, e, ne',
    minWidth: 300,
    minHeight: 100,
    maxWidth: 700,
    maxHeight: 500,
  });
});

function minimize(chatId) {
  var bottom_bar = document.getElementById("bottom_bar");
  var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
  var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
  bar.className = "chat_bar chat_box_minimized";

  $(box).stop().animate({
      height: "0px",
      width: bar.offsetWidth,
    },
    'normal', function() {
      $(box).hide();
    }
  );
}
#bottom_bar {
  position: fixed;
  z-index: 10;
  bottom: 0px;
  left: 0px;
  right: 0px;
  max-height: 40px;
  background-color: #0042b3;
  padding: 2px 20px;
}
div.chat_box {
  position: fixed;
  width: 350px;
  height: 180px;
  margin: 0px 4px;
  bottom: 45px;
}
div.close_btn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 100%;
}
div.close_btn:before {
  content: 'x';
  display: block;
  text-align: center;
  vertical-align: middle;
  line-height: 25px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  pointer-events: none;
}
div.close_btn:hover {
  background-color: rgba(0, 9, 26, 0.8);
  cursor: pointer;
}
div.chat_box_maximized {
  background-color: white;
  width: 350px;
  margin: 5px 0px;
  padding: 2px;
  border: 3px solid #0045cc;
  border-radius: 5px;
  display: inline-block;
}
div.chat_box_maximized input {
  width: 100%;
  border: none;
}
div.chat_box_maximized p {
  display: none;
}
div.chat_box_minimized {
  background-color: #002266;
  ;
  max-width: 200px;
  min-width: 80px;
  margin: 5px 0px;
  padding: 2px;
  border: 3px solid #002266;
  ;
  border-radius: 5px;
  display: inline-block;
}
div.chat_box_minimized:hover {
  background-color: #3378ff;
  border: 3px solid #3378ff;
  cursor: pointer;
}
div.chat_box_minimized form {
  display: none;
}
div.chat_box_minimized p {
  margin: 0px 5px;
  font-size: 10pt;
  color: white;
  font-weight: bold;
  pointer-events: none;
}
.light_container,
.dark_container {
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
  border: 1px solid #005eff;
  padding: 1px;
}
.light_container {
  background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
  background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
  padding: 5px;
}
div.basic_title {
  position: relative;
  width: 100%;
  background-color: #005eff;
  padding: 4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.basic_title p {
  margin: 0px;
  pointer-events: none;
}
div.basic_panel div.basic_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
  <div class="chat_box dark_container">
    <div class="basic_title">
      <p>Chat Box</p>
      <div class="close_btn" onclick="minimize(0)"></div>
    </div>
    <div class="body"></div>
  </div>
  <div class="chat_bar chat_box_maximized">
    <p>Chat Box</p>
    <form>
      <input type="text" placeholder="send a message">
    </form>
  </div>
</div>

Upvotes: 2

Views: 516

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17144

When you resize from top handle, it changes top coordinate and height. Since you set the position with bottom, normally on animate the height will change but not bottom coordinate. But as soon as resizable sets top coordinate, then the animation will be made but with top coordinate remaining.

What you can do is use resize callback to prevent top coordinate to be set when you resize. Then it'll keep the proper direction on animation, and the resize will work as well.

$(document).ready(function() {
  // controls resizing of the chat box
  $('.chat_box').resizable({
    handles: 'n, e, ne',
    minWidth: 300,
    minHeight: 100,
    maxWidth: 700,
    maxHeight: 500,
    resize: function(event, ui) {
      ui.helper.css('top', '');
    }
  });
});

function minimize(chatId) {
  var bottom_bar = document.getElementById("bottom_bar");
  var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
  var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
  bar.className = "chat_bar chat_box_minimized";

  $(box).stop().animate({
      height: "0px",
      width: bar.offsetWidth,
    },
    'normal', function() {
      $(box).hide();
    }
  );
}
#bottom_bar {
  position: fixed;
  z-index: 10;
  bottom: 0px;
  left: 0px;
  right: 0px;
  max-height: 40px;
  background-color: #0042b3;
  padding: 2px 20px;
}
div.chat_box {
  position: fixed;
  width: 350px;
  height: 180px;
  margin: 0px 4px;
  bottom: 45px;
}
div.close_btn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 100%;
}
div.close_btn:before {
  content: 'x';
  display: block;
  text-align: center;
  vertical-align: middle;
  line-height: 25px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  pointer-events: none;
}
div.close_btn:hover {
  background-color: rgba(0, 9, 26, 0.8);
  cursor: pointer;
}
div.chat_box_maximized {
  background-color: white;
  width: 350px;
  margin: 5px 0px;
  padding: 2px;
  border: 3px solid #0045cc;
  border-radius: 5px;
  display: inline-block;
}
div.chat_box_maximized input {
  width: 100%;
  border: none;
}
div.chat_box_maximized p {
  display: none;
}
div.chat_box_minimized {
  background-color: #002266;
  ;
  max-width: 200px;
  min-width: 80px;
  margin: 5px 0px;
  padding: 2px;
  border: 3px solid #002266;
  ;
  border-radius: 5px;
  display: inline-block;
}
div.chat_box_minimized:hover {
  background-color: #3378ff;
  border: 3px solid #3378ff;
  cursor: pointer;
}
div.chat_box_minimized form {
  display: none;
}
div.chat_box_minimized p {
  margin: 0px 5px;
  font-size: 10pt;
  color: white;
  font-weight: bold;
  pointer-events: none;
}
.light_container,
.dark_container {
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
  border: 1px solid #005eff;
  padding: 1px;
}
.light_container {
  background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
  background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
  padding: 5px;
}
div.basic_title {
  position: relative;
  width: 100%;
  background-color: #005eff;
  padding: 4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.basic_title p {
  margin: 0px;
  pointer-events: none;
}
div.basic_panel div.basic_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
  <div class="chat_box dark_container">
    <div class="basic_title">
      <p>Chat Box</p>
      <div class="close_btn" onclick="minimize(0)"></div>
    </div>
    <div class="body"></div>
  </div>
  <div class="chat_bar chat_box_maximized">
    <p>Chat Box</p>
    <form>
      <input type="text" placeholder="send a message">
    </form>
  </div>
</div>

Upvotes: 1

Related Questions