Develop Reference

jQuery UI : Increase the padding on resizeable()

I want to know that is it possible to increase and decrease padding on resize instead of increase and decreasing the height.
$( function() {
$( "#resizable" ).resizable({
handles: 'n,s'
});
});
Fiddle example
Update :
I actually want to know that if I resize the div I want to dynamically increase the padding on resize instead of height
Updated Fiddle
Try to resize the div from north and south position

Added a fiddle with some calculated changes.
$( function() {
$( "#resizable" ).resizable({
resize: function( event, ui ) {
var originalHeight = ui.originalSize.height;
var newHeight = ui.size.height;
var pad = 5;
if (originalHeight < newHeight) {
pad = newHeight - originalHeight;
}
$(this).css('padding', pad);
}
});
});
https://jsfiddle.net/aavrug/6rh7emog/1/

Yes its possible to include padding. Find the updated fiddle link.
div#resizable {
height: 200px;
width : 400px;
background-color : aqua;
padding: 0.5em;
}
https://jsfiddle.net/h2cjsc5h/4/

How to set correctly the relative position for Jquery Drag and Drop

I have a problem with my drag and drop function
This is my Canvas
<canvas id="note" class="lego"
width="10" height="20">
</canvas>
My Drag and drop create a clone and place it in my div (div ID is "section"), after the drop i remove his class "lego" and add a new one named "legopiazzato"
If i leave the style of the clone with "position : absolute" there is no problem.
But i need relative, because i want the top/left cordinates on the div and not the top/left cordinates on the document.
The problem is: with relative, after the drop operation, he take the mouse position absolute and, with this, set the top/left of my clone in respect of the div (my clone is placed in a different location than where I left with the drop operation)
I thought to subtract this absolute cordinates, but I don't know exactly how to do
How can i fix??
This is my DraganDrop:
$(document).ready(function () {
var x = null;
$(".lego").draggable({
helper: 'clone',
cursor: 'move',
revert: "invalid",
tolerance: "pointer",
stop: function (e, ui) {
$(".ui-draggable-dragging").addClass("legopiazzato");
$(".ui-draggable-dragging").removeClass("lego");
$(".ui-draggable-dragging").dblclick(function() {
$(this).remove();
});
$(".legopiazzato").draggable({
cursor: 'move',
grid: [ 1,1]
});
}
});
$("#section").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
console.log(ui.position.left);
console.log(ui.position.top);
x.draggable({
helper: 'original',
containment: '#section',
tolerance: 'fit'
});
x.appendTo('#section');
}
}
});
});

Creating custom avatars

I'm starting a project that will require that users be able to create multiple custom avatars. To do this, I want them to be able to send images that are in their inventory to a manipulation frame. Within this frame, users should be able to move and resize the images - double clicking them to remove the image from the frame and sending it back into their inventory. To the right of the manipulation frame, I would like a sortable list that will dictate the z-index of the corresponding item with the item at the top being in back of the manipulation frame. So far, I have this: http://jsfiddle.net/Thaikhan/e3Gd6/10/show/.
The list generates and is sortable but does not affect the z-index of the image. Also, the code is pretty buggy and often images will disappear off frame.
See JSFiddle here: http://jsfiddle.net/Thaikhan/e3Gd6/10/
Here is the JavaScript code:
//Click into Frame
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
});
//Double Click out of Frame
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).appendTo(".inventory");
$(this).draggable("destroy");
$("img", this).resizable("destroy").attr('style', '');
refreshIndexList();
});
//Updates List Items
function refreshIndexList() {
var listitems = $('.frame').children().length;
$('#sortable').empty();
var titles = $(".frame img:nth-of-type(1)").attr('title');
for (var count = 1; count <= listitems; count++) {
var title = $(".frame img").eq(count-1).attr('title');
var $li = $("<li class='ui-state-default'/>").text(title);
$('#sortable').append($li);
}
}
//Makes List Sortable
$(function () {
$("#sortable").sortable({
placeholder: "ui-state-highlight"
});
$("#sortable").disableSelection();
});
//Inventory Grid
$(function() {
$( "#grid" ).sortable();
$( "#grid" ).disableSelection();
});
I am a novice in JavaScript and have received much help in getting this far. I am hoping that once again I can receive help from the community and figure out how to have the sortable list change the z-index of the item. Additionally, if anyone sees why it's buggy, please let me know.
Ultimately, I want to be able to grab from the manipulation frame the image_id's, their locations, their z-indices, and their sizes and store it all in a database. This will hopefully allow users to return and edit their avatar creations.
A thousand thanks for your help!

create function with editing z-index:
function zindex() {
var title = "";
var i = 9999;
$(".ui-state-default").each(function () {
i--; //z-index position counter
title = $(this).text();
$(".frame img[title='" + title + "']").parent().css("z-index", i);
});
}
call it on adding img
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});
and use it on mouseup (drop event emulation)
$("#sortable").mouseup(function () {
setTimeout(function() {
zindex();}, 100);
});
FIDDLE

jquery draggable - resize selector while dragging

I have a problem with Jquery draggable, I want to drag a DIV and while dragged I will resize the DIV. Seems like Jquery calculate the height/width of the Selector just at initiation, after resize it will calculate the height/width from the begining not the actual/live and if I use a container it will not work properly.
Here is an example : http://jsfiddle.net/zwQ2S/
$("#selector").draggable({ containment: "#container", scroll: false});
$("#selector").draggable( "option", "axis", "y");
$("#container").mousemove(function() {
var margin =parseInt($("#selector").css("top"));
if (margin > 10){
$("#selector").css("height", "100px");
}
});
PS: I want to use draggable for a scrollbar with dynamic content/loading.

I found a solution Here, the final fiddle : http://jsfiddle.net/XLrNF/178/
var $container = $("#demo");
function resizeContainer(e, ui) {
//resize container here
var w1 = ui.helper.outerHeight(),
w2 = $container.height();
//console.log([ui.position.left, w1, w2].join(' : '));
ui.position.top = Math.max(Math.min(ui.position.top, w2 - w1), 0);
}
$("#draggable").draggable({
axis: "y",
drag: resizeContainer
});

jQuery resizable() dynamic maxWidth option

I have 3 columns that are resizable. When one is made wider, the one to it's left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.
My issue is that if you take the left handle and move it all the way to the right you're still able to use the right handle and expand the mid col past the edge of the parent div.
I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col.
Now the issue is that mWid is not gettings updated for here "maxWidth: mWid"
Here is what the function for the right handle looks like:
$(function() {
$("#midResizable").resizable({
handles: 'e',
containment: '#container',
maxWidth: mWid, // gets set once, but doesn't update! WHY?
minWidth: 195,
resize: function(event, ui) {
contWidth = $('#container').width()
newWidth = $(this).width()
leftWidth = $('#leftResizable').width()
rightWidth = $('#rightResizable').width()
$("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
checkWid()
}
});
});
function checkWid() {
rightWidth = $('#rightResizable').width()
leftWidth = $('#leftResizable').width()
contWidth = $('#container').width()
mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}

Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth
Looks like maxWidth: mWid, only gets called on init.
The maxWidth needs to be explicitly set after that, like this:
$( "#midResizable" ).resizable( "option", "maxWidth", mWid );

you can use the below code in start method of resizable. It will update the maxWidth and maxHeight dynamically whenever you try to resize the div element.
$('.droppedBtn').resizable({
.... //you resizable properties
start: function(event,ui)
{
$( ".CLASSNAME" ).resizable( "option", "maxWidth", layout.lWidth);
$( ".CLASSNAME" ).resizable( "option", "maxHeight", layout.lHeight);
},
stop: function(event,ui){
}
});