Is it possible to programmatically cancel a resize?

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Is it possible to programmatically cancel a resize?

Michael Pridemore

I'm working with a grid of divs that are both resizable and draggable.
I want to limit the resizing so you can't make one div overlap
another. Kind of like containment, except the other objects are
siblings to the one being resized, not parents.

The only thing I can think of would be to monitor the resize events
during the resize and cancel it if the mouse moves into another div.
But I can't figure out how one would programmatically cancel the
resize.

Any ideas?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to programmatically cancel a resize?

Scott González

All jQuery UI events are supposed to be cancelable like native
events.  So you should be able to return false, or call
event.preventDefault(), in the resize event to prevent the resize from
occurring.  Unfortunately not all events currently conform to this
standard yet, so you may or may not be able to do this right now.  If
this doesn't work, feel free to file a ticket at http://dev.jqueryui.com
(requires registration).


On May 7, 7:37 pm, "Mike P." <[hidden email]> wrote:

> I'm working with a grid of divs that are both resizable and draggable.
> I want to limit the resizing so you can't make one div overlap
> another. Kind of like containment, except the other objects are
> siblings to the one being resized, not parents.
>
> The only thing I can think of would be to monitor the resize events
> during the resize and cancel it if the mouse moves into another div.
> But I can't figure out how one would programmatically cancel the
> resize.
>
> Any ideas?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

toggle("slide") glitches

rodeored


Hello,
This page has a simple example of a slidedown area with 2 links, each
with different methods of sliding
http://reenie.org/test/jquery/t2.php

method1 is  $("#slidewrapper").slideToggle("slow");
method2 is  $("#slidewrapper").toggle("slide", { direction: "up" },
1000); using jquery-ui

In the first effect, the entire box is always visible while it is
sqeezed or expanded.  In the second effect, the box maintains its size
as it slides in and out of view.

The first effect works well in Firefox and IE, The second works well in
FF, but has problems in IE  and Safari.
In IE and Safari, before the box starts to slide up or down, it suddenly
snaps to position left:0px, ignoring the position of right:80px;  Then
when it is done sliding, it snaps back to right:80px;

How do I get this to stop snapping out of position in these 2 browsers?

Red


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: toggle("slide") glitches

Scott González

Please don't hijack threads.  Start a new thread if you have a new
topic.

On May 12, 12:57 am, "[hidden email]" <[hidden email]> wrote:

> Hello,
> This page has a simple example of a slidedown area with 2 links, each
> with different methods of slidinghttp://reenie.org/test/jquery/t2.php
>
> method1 is  $("#slidewrapper").slideToggle("slow");
> method2 is  $("#slidewrapper").toggle("slide", { direction: "up" },
> 1000); using jquery-ui
>
> In the first effect, the entire box is always visible while it is
> sqeezed or expanded.  In the second effect, the box maintains its size
> as it slides in and out of view.
>
> The first effect works well in Firefox and IE, The second works well in
> FF, but has problems in IE  and Safari.
> In IE and Safari, before the box starts to slide up or down, it suddenly
> snaps to position left:0px, ignoring the position of right:80px;  Then
> when it is done sliding, it snaps back to right:80px;
>
> How do I get this to stop snapping out of position in these 2 browsers?
>
> Red
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: toggle("slide") glitches

rodeored

Yes you are correct, I was using the google groups page and I did not
know that I was hijacking a thread. I thought I was starting a new thread.

Scott González wrote:
> Please don't hijack threads.  Start a new thread if you have a new
> topic.
>
>
>  


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to programmatically cancel a resize?

gdewitt
In reply to this post by Michael Pridemore
I was trying to solve a very similar problem, where I have a group of divs and images that are resizable, and I want to prevent them from overlapping.  I was not able to cancel the resize, but I was able to snap the resizables back to their pre-resized state using the stop event.  Here's what I did:

function snapBackOnOverlap(event, ui) {
    var rs = this;
    var rs_pos = $(rs).position();
    var rs_width = $(rs).width();
    var rs_height = $(rs).height();    
    var overlapFound = false;      
    //layout_area is a div that contains all the resizables
    $(".layout_area").children().each( function() {
        if(!overlapFound && this != rs && overlap( rs_pos.left, rs_pos.top, rs_width, rs_height, $(this).position().left, $(this).position().top, $(this).width(), $(this).height() ) )
            overlapFound = true;
    });
    //console.log('stop from ' + ui.originalSize.width + 'x' + ui.originalSize.height + ' to ' + ui.size.width + 'x' + ui.size.height);
    if(overlapFound) {
        $(this).css( { 'width' : ui.originalSize.width + 'px', 'height' : ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' } );
//you may or may not need this line - my resizables are images so I need to adjust the image inside the resizable div
        $(this).children(":first").css( { 'width' : ui.originalSize.width + 'px', 'height' : ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' } );
    }
}

//and when I create my resizable I use this:
            .resizable({
                stop        : snapBackOnOverlap,
                containment : 'parent',
                handles     : "all",
                autoHide    : true,
                knobHandles : true                          
             })
Michael Pridemore wrote
I'm working with a grid of divs that are both resizable and draggable.
I want to limit the resizing so you can't make one div overlap
another. Kind of like containment, except the other objects are
siblings to the one being resized, not parents.

The only thing I can think of would be to monitor the resize events
during the resize and cancel it if the mouse moves into another div.
But I can't figure out how one would programmatically cancel the
resize.

Any ideas?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to programmatically cancel a resize?

pavansthought
Hi,

Where can I find this overlap() function which is used as overlap( rs_pos.left, rs_pos.top, rs_width, rs_height, $(this).position().left, $(this).position().top, $(this).width(), $(this).height() ).

Please reply me as soon as possible.
Thanks in Advance.


gdewitt wrote
I was trying to solve a very similar problem, where I have a group of divs and images that are resizable, and I want to prevent them from overlapping.  I was not able to cancel the resize, but I was able to snap the resizables back to their pre-resized state using the stop event.  Here's what I did:

function snapBackOnOverlap(event, ui) {
    var rs = this;
    var rs_pos = $(rs).position();
    var rs_width = $(rs).width();
    var rs_height = $(rs).height();    
    var overlapFound = false;      
    //layout_area is a div that contains all the resizables
    $(".layout_area").children().each( function() {
        if(!overlapFound && this != rs && overlap( rs_pos.left, rs_pos.top, rs_width, rs_height, $(this).position().left, $(this).position().top, $(this).width(), $(this).height() ) )
            overlapFound = true;
    });
    //console.log('stop from ' + ui.originalSize.width + 'x' + ui.originalSize.height + ' to ' + ui.size.width + 'x' + ui.size.height);
    if(overlapFound) {
        $(this).css( { 'width' : ui.originalSize.width + 'px', 'height' : ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' } );
//you may or may not need this line - my resizables are images so I need to adjust the image inside the resizable div
        $(this).children(":first").css( { 'width' : ui.originalSize.width + 'px', 'height' : ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' } );
    }
}

//and when I create my resizable I use this:
            .resizable({
                stop        : snapBackOnOverlap,
                containment : 'parent',
                handles     : "all",
                autoHide    : true,
                knobHandles : true                          
             })
Michael Pridemore wrote
I'm working with a grid of divs that are both resizable and draggable.
I want to limit the resizing so you can't make one div overlap
another. Kind of like containment, except the other objects are
siblings to the one being resized, not parents.

The only thing I can think of would be to monitor the resize events
during the resize and cancel it if the mouse moves into another div.
But I can't figure out how one would programmatically cancel the
resize.

Any ideas?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to programmatically cancel a resize?

ArkahnX
In the event someone else finds this thread through a search engine such as I did, a function that I believe should work for the missing overlap function could be this:

AX1 is left, AY1 is top, etc. A and B refer to the objects you are referencing.
function collision(AX1,AY1,AX2,AY2, BX1,BY1,BX2,BY2) {
        if ( AX1 < BX1 ) {
                if ( AX2 < BX1 ) {
                        return false;
                } else {
                        if (AY1 < BY1) {
                                if (AY2 < BY1) {
                                        return false;
                                } else {
                                        return true;
                                }
                        } else {
                                if ( AY1 > BY2 ) {
                                        return false;
                                } else {
                                        return true;
                                }
                        }
                }
        } else {
                if (AX1 > BX2) {
                        return false;
                } else {
                        if ( AY1 < BY1 ) {
                                if (AY2 < BY1) {
                                        return false;
                                } else {
                                        return true;
                                }
                        } else {
                                if (AY1 > BY2) {
                                        return false;
                                } else {
                                        return true;
                                }
                        }
                }
        }
        return false; // should never get here
}


pavansthought wrote
Hi,

Where can I find this overlap() function which is used as overlap( rs_pos.left, rs_pos.top, rs_width, rs_height, $(this).position().left, $(this).position().top, $(this).width(), $(this).height() ).

Please reply me as soon as possible.
Thanks in Advance.


gdewitt wrote
I was trying to solve a very similar problem, where I have a group of divs and images that are resizable, and I want to prevent them from overlapping.  I was not able to cancel the resize, but I was able to snap the resizables back to their pre-resized state using the stop event.  Here's what I did:

function snapBackOnOverlap(event, ui) {
    var rs = this;
    var rs_pos = $(rs).position();
    var rs_width = $(rs).width();
    var rs_height = $(rs).height();    
    var overlapFound = false;      
    //layout_area is a div that contains all the resizables
    $(".layout_area").children().each( function() {
        if(!overlapFound && this != rs && overlap( rs_pos.left, rs_pos.top, rs_width, rs_height, $(this).position().left, $(this).position().top, $(this).width(), $(this).height() ) )
            overlapFound = true;
    });
    //console.log('stop from ' + ui.originalSize.width + 'x' + ui.originalSize.height + ' to ' + ui.size.width + 'x' + ui.size.height);
    if(overlapFound) {
        $(this).css( { 'width' : ui.originalSize.width + 'px', 'height' : ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' } );
//you may or may not need this line - my resizables are images so I need to adjust the image inside the resizable div
        $(this).children(":first").css( { 'width' : ui.originalSize.width + 'px', 'height' : ui.originalSize.height + 'px', 'top' : ui.originalPosition.top + 'px', 'left' : ui.originalPosition.left + 'px' } );
    }
}

//and when I create my resizable I use this:
            .resizable({
                stop        : snapBackOnOverlap,
                containment : 'parent',
                handles     : "all",
                autoHide    : true,
                knobHandles : true                          
             })
Michael Pridemore wrote
I'm working with a grid of divs that are both resizable and draggable.
I want to limit the resizing so you can't make one div overlap
another. Kind of like containment, except the other objects are
siblings to the one being resized, not parents.

The only thing I can think of would be to monitor the resize events
during the resize and cancel it if the mouse moves into another div.
But I can't figure out how one would programmatically cancel the
resize.

Any ideas?

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---