jQuery .resizable(): How to return to original size after clicking the button?-CodePudding

I'm trying to click a button to revert back to the original size of the element modified with .resizable. I tried:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

    <style>
    .box {
      border: 2px solid #008cba;
      margin-top: 10px;
    }

    </style>

    <script>
      $(function() {
        $('.box').resizable();
        $('#btn').click(function() {
          $('.box').resizable('destroy');
        });
      });

    </script>
  </head>

  <body>
    <button id='btn' type='button'>
      Click-me
    </button>
    <div class='box'>
      <h1 class='el1'>
        Stack Overflow resizable
      </h1>
    </div>
  </body>

</html>

But, $('.box').resizable('destroy'); just makes the resize icon disappear. I would like the element to go back to its original size when I click the button, just using jQuery, without JavaScript code. Is it possible to do that?

CodePudding user response：

To do what you require you would need to set the height and width of the resized element back to their original values.

In the example shown in your question the default value of those properties would be auto as they have not been explicitly set in CSS anywhere else.

$(function() {
  $('.box').resizable();
  
  $('#btn').click(function() {
    $('.box').resizable('destroy').css({
      width: 'auto',
      height: 'auto'
    });
  });
});

.box {
  border: 2px solid #008cba;
  margin-top: 10px;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<button id='btn' type='button'>Click-me</button>
<div class='box'>
  <h1 class='el1'>Stack Overflow resizable</h1>
</div>

CodePudding user response：

$(function () {
    $(".box").resizable();
    $("#btn").click(function () {
        let instance = $(".box").resizable("instance");
        $(".box").width(instance.originalSize.width);
        $(".box").height(instance.originalSize.height);
        $(".box").resizable("destroy");
    });
});

.box {
    border: 2px solid #008cba;
    margin-top: 10px;
}

<link rel="stylesheet"  href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<body>
    <button id="btn" type="button">Click-me</button>
    <div >
        <h1 >Stack Overflow resizable</h1>
    </div>
</body>