How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

I need help figuring out how to revert an element back to its original size after it has been modified with .resizable. I attempted the following:

<!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>

Unfortunately, when I use $('.box').resizable('destroy');, only the resize icon disappears. Is there a way to make the element return to its original size when the button is clicked using only jQuery, without any additional JavaScript code?

javascripthtmljquerycss

Answer №1

If you want to achieve the desired effect, you will have to revert the height and width of the resized element back to their original values.

In this particular scenario, if those properties are not explicitly set in the CSS, their default value would be auto.

$(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>

Answer №2

$(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 class="box">
        <h1 class="el1">Resizable Box Example</h1>
    </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered in React: Unable to access property of splice as it is undefined

As I am still getting acquainted with React/JS, I am currently navigating through the process of developing a mobile website. My main goal is to incorporate a delete function without the use of a button. My approach involves utilizing a long-press event, a ...

javascriptreactjs

The content is not wrapped when transferred from App.js through props, although it is being wrapped in other scenarios

As I work on developing a basic invoice generator application, I encounter an issue with overflowing content in the "notes" section when passing data through props from the App.js file. Instead of wrapping the text, it overflows its container. import "./Ap ...

javascripthtmlcssreactjsbootstrap-4

It appears that req.session is not defined and the user_id within req.session is not

Currently, I am implementing session management with Express and Node using HTTPS. I am facing an issue where I need to create a session in Express for authentication before redirecting to static files in the public folder. Previously, I encountered a prob ...

javascriptnode.jssessioncookiesexpress

Error in tabs.onUpdated argument in Firefox WebExtensions

I am currently working on developing a straightforward webExtension for Firefox and I would like to implement tabs.onUpdated with a filter. I found an example on the Mozilla website that I decided to use: const pattern1 = "https://developer.mozilla.org/*" ...

javascriptfirefoxfirefox-addon-webextensions

Updating HTML content dynamically using Node.js without requiring a page refresh

Currently, I am in the process of learning nodejs and I am looking to dynamically change the content within my HTML without having to completely re-render the entire page every time I make a post. Below is the snippet of code I am currently working with: ...

htmlnode.jsexpress

Accessing JSON fields containing accents in JavaScript

I am encountering an issue with the JSON file below: { "foo supé": 10 } My attempt is to extract and log the value of the field "foo supé" into the console using the code snippet provided: <!DOCTYPE html> <html> <s ...

javascriptjson

Integrating Material-UI Dialog with Material-table in ReactJS: A Step-by-Step Guide

I have implemented the use of actions in my rows using Material-Table, but I am seeking a way for the action to open a dialog when clicked (Material-UI Dialogs). Is there a way to accomplish this within Material-Table? It seems like Material-UI just appen ...

javascriptwebmaterial-uimaterial-table

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

javascripthtmlcss

Updating parent data in Vue.js does not automatically trigger an update in the child component

I have the following: Vue.component('times-updated', { template: '<span>Times Updated: {{ timesUpdated }}</span>', data: function() { return { timesUpdated: this.$parent.myData.timesUpdated ...

javascriptvue.jsvue-component

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

htmlcssanimation

By combining TCPDF with basic HTML, you can easily generate a detailed table of contents

Is there a way to generate a table of contents when printing HTML to PDF using TCPDF? Here is an example code snippet: $html = '<h1>Hello</h1> How are you? <h2>Answer</h2> I am well, thanks'; // ... etc. Long HTML documen ...

phphtmltcpdf

What are the benefits of integrating firebase-admin-sdk with firebase-ui and firebase-client-sdk for both server-side and client-side authentication management?

I am currently working on implementing an authentication mechanism for my Next.js project. Specifically, I plan to utilize firebase-auth and firestore. My main goal is to keep important security logic on the server side to ensure safety. I want to avoid ex ...

javascriptnode.jsnext.jsfirebase-authenticationfirebase-admin

Removing data using axios in a React project

I'm currently working on a small app using the Json server package to help me keep track of movies I want to watch in my free time. I am looking to learn React and Axios, so I decided to build this app with these technologies. The concept is simple - ...

javascriptjsonreactjsaxios

Using .htaccess file to optimize SEO crawling for single page applications that do not use hashbangs

When using a page with pushState enabled, the typical method of redirecting SEO bots involves utilizing the escaped_fragment convention. More information on this can be found here. This convention operates under the assumption that a hashbang prefix (#!) ...

javascript.htaccessweb-crawlersingle-page-application

In the Node environment, why does null evaluate as less than 3 while also being greater than 3?

How come null is false when compared to 3 in node, and true when compared to 3? $ node > null > 3 false > null < 3 true ...

javascriptnode.js

implementing a search filter using a search bar with JavaScript, inside a Laravel Blade or HTML file

Our current website is powered by a Laravel blade template, showcasing furniture groups with multiple pieces of furniture in each group. The page is constructed using Laravel's foreach loops for both furniture groups generated by $orderformdata->pg ...

javascriptangularjsjsonlaravel

Prevent the Icon in Material UI from simultaneously changing

I'm working on a table where clicking one icon changes all icons in the list to a different icon. However, I want to prevent them from changing simultaneously. Any suggestions on how to tackle this issue? Code: import React from 'react'; im ...

javascriptcssreactjstypescriptmaterial-ui

Is it possible for node-java to accept anonymous functions as parameters in Java?

I am looking to pass an anonymous function from JavaScript to Java using node-java (https://github.com/joeferner/node-java). Below is a snippet of the Java code for reference: public class Example { public Example() { } public interface Callb ...

javascriptjavanode.jsnode-java

What could be causing my Express server to return a 404 error when trying to submit the form, all while failing to display any console

Having trouble setting up multi-user sessions similar to Google Docs, but my server file seems unresponsive. I've double-checked my fetch function and ensured it is accurate, yet no changes are occurring. Even console.logs from the server file command ...

javascriptnode.jsreactjsexpress

The order in which jQuery is loaded can impact the layout of

I am facing an issue with my jQuery code that loads status to a profile page using a ul with li status items. The each() function retrieves items from a JSON callback, and the load() function is supposed to ensure that the image is available before creatin ...

ajaximagejquery