user image

Mahmoud Santos
Published in : 2022-02-23

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

jQuery

I am 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?

Comments

Eslam Zedan Date : 2022-02-23

Best answers

8

Best answers

8

 

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>

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

jQuery Selector is not working .click
Publish date: 2022-02-21 | Comments: 1

Tag: jQuery

Accessing Radio button values using Jquery
Publish date: 2022-03-05 | Comments: 1

Tag: jQuery

Display JSON in HTML using jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

How to use !important using jQuery css function?
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

jQuery alter the class of a button when I click on it?
Publish date: 2022-02-12 | Comments: 1

Tag: jQuery

[SOLVED] jQuery .click() not working with auto added buttons
Publish date: 2021-06-19 | Comments: 2

Tag: jQuery

[solved] SyntaxError: Unexpected token o in JSON at position 1 jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

How to get the style of element in jQuery? add it to another
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery