How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code:

http://jsfiddle.net/mQCxY/

$(function () {
    $('.circle').click(function () {
        $(this).effect("size",
            { to: {width: 50,height: 50}, origin: ['bottom', 'right'] },
            1000, function () {
                $(this).css({'background': 'blue' });
        });
    });
});

With jQuery UI version 1.8.18 (under jQuery 1.7.2), the shape properly shrinks and maintains its size. However, in later versions, it reverts back.

I also observed that the "origin" parameter does not work in higher versions of jQuery UI. I used

origin: ['bottom', 'right']

Which had no impact on jQuery UI 1.9 or above.

Is there a way to prevent the restoration of the size and effectively use the 'origin' setting in jQuery UI 1.8 or newer?

jquerycssjquery-ui

Answer №1

I have created a new function that will fulfill your requirements. Check out the working example on JsFiddle.

In this updated version, I replaced the effect with animate and modified the CSS properties for top and left to achieve the desired functionality. By default, it aligns to the top-left corner.

For instance:

If origin is set to ['bottom'], it behaves the same as ['bottom','left'].

If origin is set to ['right'], it is equivalent to ['top','right'], and so on.

function size(object, to, origin, duration, callback){
    var leftResult = '+=0';
    var topResult = '+=0';
    if (origin != null && origin.length != 0){
        if ($.inArray('right', origin) >= 0){
            leftResult= '+='+to.width;
        }
        if ($.inArray('bottom', origin) >= 0){
            topResult= '+='+to.height;
        }
    }
    $(object).animate({
        height: to.height,
        width: to.width,
        left: leftResult,
        top: topResult
  }, duration, function() {
    if (typeof callback == "function") callback($(object));
  });
}

You can simply enhance argument validation or customize the callback according to your needs.

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

I am struggling to increase the width of my input bar and center-align it

Below is the CSS class I've created to ensure that all elements remain centered on the user's screen. container: { display: "flex", position: "absolute", top: 0, left: 0, height: "100%&qu ...

htmlcssmaterial-ui

When a specific option is selected in a `select` element with the `multiple` attribute, activate the change event

Is it possible to trigger a change event on individual options within a standard select element using jQuery or another method? I want the change event to be triggered on the option elements themselves rather than on the select element, as multiple options ...

javascriptjqueryjquery-selectors

correcting mistakes in the design of the website

After inserting Google Adsense on my website, the content of the site moved down. Is there a way to have the content appear alongside the Google Adsense rather than below it? You can view my site here: .wrapper { width: 990px; margin: 0 auto; ...

css

Prevent button from being clicked until a certain task is completed using jQuery Steps

i'm currently facing an issue with the jQuery Steps plugin. I need to have the next button disabled until a specific action is completed, and then enable it once the data has been properly validated. My main question is: how can I initially set the n ...

jqueryjquery-steps

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

Two elements occupy the rest of the vertical space

In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...

htmlcssflexbox

Saving the selections from two drop-down menus into a single variable

I have a requirement to store the user selected values from two dropdown menus. These dropdowns are created using the selectize library in HTML: <div style="max-width: 200px"> <select id="dropdown-1" ...

javascriptjquerydrop-down-menuselectize.js

How to use AJAX to retrieve the text content of an HTML option value?

I have a script that displays a list of values, which I want to write: <option th:each = "iName : ${iNames}" th:value = "${iName}" th:text = "${iName}" th:selected="${selectedIName == iName}" In addition, I have the function setSelectedName in my .j ...

javascriptjqueryhtmlajax

What could be causing the error in sending JSON data from JavaScript to Flask?

Check out this cool javascript code snippet I wrote: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type=text/javascript> $(function() { $.ajax({ type: 'PO ...

javascriptjqueryajaxflask

Error message: The function _this.$(...).modal is not defined for the OpaqueToken jQuery in Angular-cli

I'm facing an issue with using jQuery in Angular2. I can't seem to get my modal to pop out. Error message: I used Angular-cli npm install and then yarn to install bootstrap + In my .angular-cli.json file, I have the following scripts: "script ...

jqueryangular

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

cssreactjsresponsive-designleaflet

Clearing Results Section Using JQuery and Ajax: A Guide to Implementing a Reset Button

Currently, I am diving into the world of Jquery and got stuck on a particular issue. The example I found online consists of a JSP form (a simple addition calculator) and a Servlet that adds two numbers together and displays the result upon clicking the "Ca ...

jqueryajaxjsp

What is the method for incorporating various font sizes within tooltip content?

I need assistance with making the number of days (Difference_In_Days, Difference_In_DaysRev) appear in a larger font than the rest of the text within a tooltip. I attempted to include a <span style="font-size:25px;"> tag in the mess variable, but enc ...

jqueryxslt

Ways to shut down a pop-up

Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...

jqueryhtmlcss

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

css

Error Handling with PHP's die() Command

There seems to be an issue that I am facing with the die() commands. On my website, I have a member registration page which includes a form. The form's action leads to another PHP script. However, when the form is submitted, instead of displaying an a ...

phpjquery

Arranging an accordion in alphabetical order using jQuery

Could someone help me with organizing my accordions alphabetically? I would like to have 4 buttons at the top of all accordions to sort them alphabetically by: Name, Lastname, Street, City Here is the HTML Code I currently have. <div class="all"&g ...

jquerysortingaccordionalphabetical

Transform the check box into a button with a click feature

I've customized a checkbox to resemble a button, but I'm encountering an issue where the checkbox is only clickable when you click on the text. Is there a way to make the entire button clickable to activate the checkbox? .nft-item-category-lis ...

htmlcsscheckbox