We Keep Coding

jQuery UI-Resizable Adding an Unwanted Margin

jQuery UI "resizable" adds a 10 pixel handle to the right and bottom of an element. See example here: http://jsfiddle.net/Thaikhan/fGJ59/10/show/
If you click on Pikachu, then try to drag him into the bottom right corner, he doesn't fit flush because of the handle margin.
I want the images to be able to fit flush against the border. I've tried to disable the handle but have been unable to retain resizability while removing the border.
If this isn't possible, perhaps there's a way to add 10px to the right and bottom margin of the container and have the elements go through the border?
Thanks for your help!
Here is the relevant jQuery:
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
// containment: "parent",
minHeight: 50,
minWidth: 50,
maxHeight: 300,
maxWidth: 400
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});

Because you're working with the images directly resizable is wrapping them in a div and adding space for the handle. If you wrap the images in a div yourself, set resizable on the div and set the image to also resize you can get the desired effect. The handle will hover over the image and the image will be flush to the side.
The changes:
.frame img {
position: relative;
height : 50px;
width: 50px;
}
You need to get rid of the top and left positioning, they don't seem to be doing anything and they mess things up when you wrap the image in a div.
$('.inventory').on('click', 'img', function () {
$(this).wrap('<div style="height:50px;width:50px;"></div>');
$(this).parent().resizable({
aspectRatio: 1,
alsoResize:this,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});
Wrap the image in a div when it's added to the frame.
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).find('img').appendTo(".inventory").attr('style', '');
$(this).draggable("destroy");
$(this).resizable("destroy");
$(this).remove();
refreshIndexList();
zindex();
});
And then break the image out of the div when you put it back.
http://jsfiddle.net/fGJ59/13/

trigger event when draggable hit edge of containment

jQuery UI draggable plugin allow you to set contain for draggable like
$('.panel').draggable({
handle: ".head",
containment: "parent",
cursor: "pointer"
}
);
My question is how can I detect if div have reached the edge of its containment?
I want to mimic the Windows effect when you drag a panel to edge it go 50% width and 100% height but I don't know how to detect/trigger an event when div reaches the edge.
Thanks

You can use the drag function to return the position of the draggable element while it's being moved. Compare that against the position of the outer edge of the parent and when the two intersect trigger the resizing action.
This fiddle is a very simplified version of what you're looking for, but it should illustrate the basic concept and get you started in the right direction. Hopefully this helps.
http://jsfiddle.net/98jpC/1/
$(function(){
var draggableRight;
var draggableWidth = $('.draggable').width();
var parentWidth = $('#parent').width();
$('.draggable').draggable({
containment: 'parent',
drag: function(e, ui){
draggableRight = ui.position.left + draggableWidth;
if(draggableRight == parentWidth){
$(document).trigger("mouseup");
$('.draggable').css({
width: '50%',
height: '100%',
top: 0,
left: '50%'
});
}
}
});
});

How do you reduce the scrollable height of a div with scaled content?

I have a scrollable div that I zoom/scale the content of using css3 transform. It works fine if I'm zooming in (scaling up the content) but I've noticed that when scaling down, below 100%, the amount that you can scroll vertically of the container div does not reduce.
I've made a jsfiddle to illustrate this
CSS:
.scrollable
{
height: 250px;
width: 250px;
overflow: auto;
background-color: green;
}
.content
{
height :500px;
width : 500px;
background: linear-gradient(red, blue);
...
}
JS/jquery:
function scaleContent(newScale){
var $content = $("#content");
var scaleString = "scale("+newScale+")";
//var height = (newScale<1)? $("#content").height()/scale*newScale : originalHeight;
$content.css({
'-webkit-transform' : scaleString,
'-webkit-transform-origin' : '0 0',
...
//'height' : height +'px'
});
scale=newScale;
}
The actual scaling and the amount that you can scroll horizontally works perfectly, but the amount you can scroll vertically doesn't change below 100%.
Note: the amount you can scroll vertically appears to change on the first scaledown/zoomout, but this is simply because the horizontal scrollbar is removed.
I tried to manually change the height of the content, but this just messed with the content dimensions (duh). That's the commented-out height code.
The ellipses are where I've repeated things for other browsers.

I've managed to come up with one solution, though it's probably not the best. I introduced another div around the content, which I call the view wrapper. I set its overflow to "hidden" and manually set its width and height to match what the scaled content should be.
CSS:
.viewwrapper{
height :500px;
width : 500px;
overflow: hidden
}
JS:
function scaleContent(newScale){
var $content = $("#content");
var scaleString = "scale("+newScale+")";
var $viewwrapper = $("#viewwrapper");
var height = $content.height()/newScale;
var width = $content.width()/newScale;
$viewwrapper.height(height);
$viewwrapper.width(width);
$content.css({
'-webkit-transform' : scaleString,
'-webkit-transform-origin' : '0 0',
...
});
}
JS Fiddle
Update:
This won't work if you're using jQuery 3.0 or 3.1. The read behaviour of the height and width functions has changed, so they return the scaled values. To fix the above code for those versions you can just say.
function scaleContent(newScale){
var $content = $("#content");
var scaleString = "scale("+newScale+")";
var $viewwrapper = $("#viewwrapper");
$viewwrapper.height($content.height());
$viewwrapper.width($content.width());
$content.css({
'-webkit-transform' : scaleString,
'-webkit-transform-origin' : '0 0',
...
});
}
JSFiddle using jQuery 3.0
However this probably won't make it into future versions of jQuery.
Update 2:
You might see unnecessary scrollbars in Chrome when you zoom out of the content. This is down to a Chrome bug.

you're applying transformations to your #content div, but the outside div, #scrollable has also a fixed height and is not reducing. You have to apply transformations to it too.
Because if you're zooming in, the outside div adapts to the inside content, whereas if you're reducing it does not.

JS change height and return to original CSS height

Hoping to get some help on some javascript i'm getting stuck with.
Q1: JS RETURN TO IMAGE HEIGHT AND MARGIN
My layout is horizontal scroll of smaller images positioned in a grid, using different height percentages and margins to position.
When you click on any of the images they all expand to height:100% and margin:0 which clears all previous styles putting it into a simple large image layout.
My question is how do I add a function that when clicking on .image-container the height and margins returns to how it was originally set in the css
JS FIDDLE DEMO (click any center image)
// GALLERY 100% height
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': '?'},900)
.animate({'margin': '?'},900);
});
EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES
Right now my .image-container is set to a large width but with responsive images it's hard to find the correct width, is there a way to find this width and to make it grow along with the click grow of images (displayed above)
.image-container {
display:block;
width:3600px;
height: 75%;
float:left;
position:absolute;
top: 13%;
left: 120px;
z-index: -1;
}
Thanks for any help!

You need to store the original height in a variable.
Check out the updated fiddle
var originalheight;
// GALLERY 100% height
$('.image-container').click(function(){
originalheight = $('.image-container img').height();
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
//REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': originalheight},900)
.animate({'margin': '0'},900);
});
EDIT:
Sorry about the goof up in previous solution. I didn't notice I was using click twice unnecessarily.
Here's the updated solution with the updated fiddle.
var originalheight;
$('.image-container').click(function () {
if (!originalheight) originalheight = $('.image-container img').height();
if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
$('.image-container img').animate({
'height': '100%'
}, 900).animate({
'margin': '0'
}, 900);
} else { //REMOVE HEIGHT ?
$('.image-container img').animate({
'height': originalheight
}, 900).animate({
'margin': '0'
}, 900);
}
});

This is my idea, hope it'll work:
// Before animation
var heights = new Array();
var margins = new Array();
$('.image-container img').each(function(){
heights.push($(this).css('height'));
});
$('.image-container img').each(function(){
margins.push($(this).css('margin'));
});
//
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': heights[$(this).index()]},900)
.animate({'margin': margins[$(this).index()]},900);
});

First of all, I suggest you to use the focusout and blur event to undo changes, because the way you implement your 'click' event, the second part only will be considered (you erase the first click implementation doing so). the best thing, is to enlarge the image when clicked, and reinit it's size when you click away.
Try this :
// GALLERY 100% height
$('.image-container')
.bind('click', function(){
$('.image-container img').animate({height: '100%'},900)
.animate({margin: 0},900);
})
.bind('focusout blur', function(){
$('.image-container img').animate({height: ''},900)
.animate({margin: ''},900);
});
Or better, use classes in which you define the behaiviors on clicking, and on clicking again, for exemple :
<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>
$('.yourOriginalValues').click(function(){
$(this).switchClass( "yourOriginalValues", "clickimage", 900 );
});
$('.clickimage).click(function(){
$(this).switchClass( "clickimage", "yourOriginalValues", 900 );
});
ps. the switchClass method, is a jQuery UI functionality.

Making a div on the fly that is resizable not working

I have a function that creates a div on the fly using jquery, and the user can define several properties to style the div. The problem is that I want the div to be resizable but the resulting div is the size the user defines but I am not able to resize it.
this is my function:
function createDiv(id, divWidth, divHeight, divContent, divBgColor, opacity){
//FIRST HEX TO RGB FOR BG COLOR & OPACITY
var currentColor = hexToRgb(divBgColor);
//CREATE THE WRAPPER DIV
var wrapper = $('<div/>', {
id: id
}).css({
"backgroundColor": 'rgba('+currentColor+' '+opacity+')',
"min-width": divWidth,
"min-height": divHeight
}).resizable({
containment: 'parent',
minHeight: divHeight,
minWidth: divWidth
}).appendTo('.current-layer');
}
This is the call to the function:
onclick="createDiv('1', '200px', '100px', 'text', '#FF0000', 0.5)"
I hope someone can tell me what I am doing wrong! TIA

The parent(containment) must have a width/height higher than the min-width/min-height of the resizable.
Currently width and height is not set, so it will be 100% and 0
Result: you can resize the resizable:
width: 200px up to the width of the containment(100%)
height: 100px up to height of the containment(also 100px, derived from it's content), so the height is unresizable
Demo: http://jsfiddle.net/doktormolle/VnCHA/

I solved the problem and feel like bit of a muppet.
Because the div was created on the fly I had to make it resizable after it was appended to the DOM.