Is the accuracy of the alsoResize functionality in Jquery UI Resizable questionable?

Question

Is the accuracy of the alsoResize functionality in Jquery UI Resizable questionable?

After removing the 'alsoResize' option, I found that the behavior remains unchanged.

Upon resizing the main element, I noticed that the black border of the bottom element, 'marquee,' often shifts out of alignment with the dashed white border of the top element.

$(".layer").resizable({
    //alsoResize: '.marquee',
    resize: function(event, ui) {
        $('.marquee').css({
            width : ui.size.width + "px",
            height : ui.size.height + "px",
            left : ui.position.left + "px",
            top : ui.position.top + "px",
        });
    },
    handles: 'all',
    aspectRatio: true,
});

http://jsfiddle.net/digitaloutback/uGr3w/3/

When inspecting with Firebug on a local demo, I observed that when they go out of line, the inline styles for left, top, width, and height are different.

I'm considering whether a solution would involve sending position and size statistics to a function that will provide precise measurements to both elements. Are there any simpler alternatives? Thank you.

UPDATE:

I have developed a clean workaround... by passing the dimensions calculated by resizable to a function that sets the top layer to these same dimensions.

I believe there may be a more efficient way to achieve this, so please feel free to suggest an optimized version...

http://jsfiddle.net/digitaloutback/VDfpY/5/

javascript jquery css jquery-ui resizable

Answer 1

Answer №1

There appears to be a discrepancy in the reported size and position from the ui parameter during the resize event, compared to the actual sizes and positions. The issue may stem from a delay between the creation of the ui parameter and the firing of the event.

To address this, I conducted an experiment where I used the real-time position and size data at the moment the event executed:

        $('.marquee').css({
            'left' : $(this).position().left,
            'top' : $(this).position().top,
            'width' : $(this).width(),
            'height' : $(this).height()
        });

This adjustment resulted in a much more precise alignment with the actual dimensions. http://jsfiddle.net/VDfpY/1/

Answer 2

There appears to be a discrepancy in the reported size and position from the ui parameter during the resize event, compared to the actual sizes and positions. The issue may stem from a delay between the creation of the ui parameter and the firing of the event.

To address this, I conducted an experiment where I used the real-time position and size data at the moment the event executed:

        $('.marquee').css({
            'left' : $(this).position().left,
            'top' : $(this).position().top,
            'width' : $(this).width(),
            'height' : $(this).height()
        });

This adjustment resulted in a much more precise alignment with the actual dimensions. http://jsfiddle.net/VDfpY/1/

Answer 3

Answer №2

Have you considered letting CSS manage the sizes instead of JavaScript? Check out this example on jsFiddle

--updated with code snippet--

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".layer").resizable({
        handles: 'all',
        aspectRatio: true,
    });

});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
#canvas { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    overflow: hidden; 
    background: #999}

.marquee {
    border: 1px dashed #fff;
    position: absolute;
    left: -1px; top: -1px;
    width: 100%; height: 100%;
    display: block;
    z-index: 2500;    
}

.layer {
    border: 1px solid black;
    position: absolute;
    left: 150px; top: 150px;
    width: 250px; height: 226px;
    display: block;
    z-index: 2501;
}
</style>
<body>
<div id="canvas">
    <a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

Answer 4

Have you considered letting CSS manage the sizes instead of JavaScript? Check out this example on jsFiddle

--updated with code snippet--

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".layer").resizable({
        handles: 'all',
        aspectRatio: true,
    });

});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
#canvas { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    overflow: hidden; 
    background: #999}

.marquee {
    border: 1px dashed #fff;
    position: absolute;
    left: -1px; top: -1px;
    width: 100%; height: 100%;
    display: block;
    z-index: 2500;    
}

.layer {
    border: 1px solid black;
    position: absolute;
    left: 150px; top: 150px;
    width: 250px; height: 226px;
    display: block;
    z-index: 2501;
}
</style>
<body>
<div id="canvas">
    <a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

Is the accuracy of the alsoResize functionality in Jquery UI Resizable questionable?

Answer №1

Answer №2

Similar questions

Identify the active slide and execute a corresponding function in ANgularJS

Is your Bootstrap button displaying a blue border?

NodeJS Fork - React each instance a new line is detected from the child process

When using jQuery to parse JSON, I am unable to make changes to an array

Centered text with custom images in an HTML list

The import error occurred because the module 'styled-components' does not export 'createGlobalStyle'

Obtaining JSON data in a separate JavaScript file using PHP

Examining if elements in a mapped array have common values

JavaScript - Struggling with decoding a JSON object

Angular does not seem to support drop and drag events in fullCalendar

What methods can be used to protect (encrypt using Java code) the information in a login form before it is sent to a servlet for

How to align a child element in the center when the parent is not centered or taking up the full width

Tips for interacting with the DOM in an Angular 4 application

Exploring creative solutions for generating PDFs with Node JS

ngRepeat does not completely refresh the DOM when dealing with a basic array

What is the best method for serializing data associated with the current item in a jQueryUI sortable list?

Steps for initiating an XMLHttpRequest in a XUL setting

Is it possible to execute NodeApp in a command-line fashion?

Toggle the visibility of the route layer in Leaflet by clicking on a button using the Easy Button plugin

Tips on serving a static file from a location other than the public or view directories following middleware in Express JS