JQuery resizing on both sides
I'll try to clarify the words: I would like to know if there is a way with jquery-ui-resizable to resize an object from 4 sides at the same time, so that the center of the object remains in the same place.
Here is the sandbox http://jsfiddle.net/V79Ge/
So this is very similar to aspectRatio = true, but as long as I resize the object on one side it will control the other three sides
Thanks for your tips!
+3
source to share
5 answers
This effect you are after: jsFiddle example .
JQuery
$('#resizeMe').resizable({
aspectRatio: true,
resize: function(event, ui) {
$(this).css({
'top': parseInt(ui.position.top, 10) + ((ui.originalSize.height - ui.size.height)) / 2,
'left': parseInt(ui.position.left, 10) + ((ui.originalSize.width - ui.size.width)) / 2
});
}
});
Edit: Updated code and jsFiddle to use ui.position and ui.originalSize.
+10
source to share
I have made some j08691 examples. It now also works with the northwest handle.
http://jsfiddle.net/j08691/V79Ge/19/
$('#resizeMe').resizable({
aspectRatio: true,
handles: 'all',
resize: function(event, ui) {
var posTop = parseInt(ui.position.top, 10);
var posLeft = parseInt(ui.position.left, 10);
var oPosTop = parseInt(ui.originalPosition.top, 10);
var pPosLeft = parseInt(ui.originalPosition.left, 10);
if(posTop == oPosTop && posLeft == pPosLeft)
{
$(this).css({
'top': posTop + ((ui.originalSize.height - ui.size.height)) / 2,
'left': posLeft + ((ui.originalSize.width - ui.size.width)) / 2
});
}
else {
var width = ui.size.width;
var height = ui.size.height;
var oWidth = ui.originalSize.width;
var oHeight = ui.originalSize.height;
$(this).css({
'width': width + (width - oWidth),
'height': height + (height - oHeight)
});
}
}});
He still needs more development. Doesn't work with all pens.
0
source to share
$(".nodecontainer").each(function () {
$(this).parent().attr('style', $(this).attr('style'));
$(this).spectrum({
showPalette: true,
change: function (color) {
$(this).parent().css('background-color', color.toHexString());
},
palette: [
['black', 'white', 'blanchedalmond'],
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
]
})
});;
$('.nodecontainer').each(function () {
$(this).resizable({
alsoResize: $(this).parent(),
resize: function (e, ui) {
$(this).css("top", 0);
$(this).css("left",0);
$(this).css("position","relative");
}
});
});
0
source to share