Mahmoud Santos
Published in : 2022-02-23
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=//code.jquery.com/jquery-3.6.0.js></script> <script src=//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?
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Eslam Zedan Date : 2022-02-23
Best answers
8
Best answers
8
To do what you require you would need to set the
heightandwidthof the resized element back to their original values.In the example shown in your question the default value of those properties would be
autoas they have not been explicitly set in CSS anywhere else.