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/

Removing jQuery fancyBox black bars

On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?

I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG

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.

Setting width and height of fancybox

I've tried the following code with little to no avail:
$(document).ready(function(e){
$(".iframe").fancybox(
{
height: 950,
width: 400 }
);
});
I've put everything in quotes and everything without quotes and nothing seems to have any effect of the fancybox. There does seem to be some effect on the width, but it's irregular and temperamental. From what I can tell, all including the width does it set the width to it's default value.

Try:
$(document).ready(function() {
$(".iframe").fancybox({
maxWidth : 950,
maxHeight : 400,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false
});
});

Add a scrollbar to a modal box in prototype

im created a modal box using prototype.js using the following code, i want to add the scroll to this , how can i add that ?
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
overlayClose: false,
overlayOpacity: 0.25
});

From the ModalBox site:
NEW! “Scrolling mode”. If your content might be long just define the height of the ModalBox and it will be switched into “scrolling mode”
So you just need to add a height value!
Modalbox.show($('viewModalbox-'+questionid),{
title: question,
width: 500,
height: 500,
overlayClose: false,
overlayOpacity: 0.25
});