Develop Reference

JQuery UI resizable grid, inconsistent behavior depending on grid value

I need a resizable bar that can go all the way to no bar. Depending on how what I set the grid to, sometimes I can, sometimes I can't. The values I try are multiples of the initial size of the bar.
Here are examples
Working:
https://jsfiddle.net/dg851voo/
$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
handles: 'n',
grid: [0, 60]
});
Not working:
https://jsfiddle.net/xmzj3x54/
$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
handles: 'n',
grid: [0, 20]
});
I need to be able to go all the way to no height for any multiple of the initial bar size.

I was able to get this working horizontally but not vertically. Possibly a bug with jQuery itself? Instead I came up with a slightly hacky solution that should get the job done.
Basically, if your grid size is 20 then the min height seems to be 20px - even if minHeight is set to 0. You put the resizable div in a wrap div, shift the resizable div down 20px, then you set the wrap to be overflow: hidden. Then if you want to retrieve the perceived height of the div you will have to subtract 20 from the actual height. Example below.
var gridY = 20;
$("#resizable").resizable({
handles: 'n',
grid: [0, gridY],
minHeight: gridY,
maxHeight: 120,
resize: function(e, ui){
var actualHeight = ui.size.height;
var perceivedHeight = actualHeight - gridY;
$("p").text(`${perceivedHeight}%`);
// because the height of my div is
// 100 I dont have to convert it to
// percentage, but if it was anything
// other than 100 you would have to
}
});
#resizable-wrap{
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
#resizable {
position: absolute;
top: 0;
left: 25px;
width: 50px;
height: 120px;
background-color: #F3EF7D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>

When resizing jqxWindow, window body width and height not changing

Here is JSFIDDLE to my problem. As you can see, divs displayed inside window have set width to 100%, and my goal si to foce this divs to automatically resize when I am manually resizing the window.
#container {
width: 100%;
display: table;
table-layout: fixed;
border: 5px solid #ccc
}
I was looking inside this element throught element inspection in chrome and I figured out, that windowBody div doesn't change its width and height and that is the problem. Does anyone know how to achieve what I want?

I have just found out, that the problem was that you cannot declare maxWidth and maxHeight to 100% in jqxWindow declaration. You need to set absolute numbers. In my case worked setting them to max width of the screen.
$('#jqxwindow').jqxWindow({
height: 200,
width: 340,
minHeight: 100,
minWidth: 200,
maxHeight: screen.height,
maxWidth: screen.width,
isModal: true,
autoOpen: true,
resizable: true
});
here is JSFIDDLE

Resize an Image on click

So I'm trying to make a simple gallery of photos that enlarge when you click them and then return to their smaller size when you click them a second time. I have the enlarge part working but so far I have only been able to get the picture to scale back down by using ".mouseout" with JQuery, which is not what I want. Also I'd like the image to sit on top off all the other images/divs when it is enlarged, right now it gets covered by any other image to the left or right.
Here's my code, and a jsfiddle link at the bottom
HTML
<div id="Gpic1">
<img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>
CSS
#Gpic1 {
width: 280px;
height: 187px;
display: block;
background: black;
}
#table {
width: 280px;
height: 187px;
}
JQuery
$('#Gpic1').hover(function () {
$(this).find('img').fadeTo(500, 0.5);
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#table').click(function () {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").stop().animate({
width: 800,
height: 533
}, 200); //Bigger
}).mouseout(function () {
$("#table").stop().animate({
width: 280,
height: 187
}, 200); //Smaller
});
http://jsfiddle.net/kmx6C/
Thanks

You can add a class enlarged to the element you are enlarging, and then check whether the image is currently enlarged or not.
if($('#table').hasClass('enlarged')){
$('#table').removeClass('enlarged');
$("#table").stop().animate({width: 280, height: 187}, 200 );
}else{
$('#table').addClass('enlarged')
$("#table").stop().animate({width: 800, height: 533}, 200 );
}
Fiddle: http://jsfiddle.net/4LUYM/

You will need to keep track if the image is expanded or normal:
See it here: http://jsfiddle.net/kmx6C/4/
if ($(e.target).hasClass('expanded')) {
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
} else {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").addClass('expanded').stop().animate({
width: 800,
height: 533
}, 200);
}
If you're going to still use the mouseout event, then you'll want to make sure to remove the class there:
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
As for making is "sit" a top of other images, you'll want to make sure that the "z-index" and "position" is set accordingly.

Opening a fancyBox with a certain aspect ratio

Does anyone know how I can open a resizable fancyBox with a certain aspect ratio (for example 16:9)?

There isn't a native way of easily resizing Fancybox. You can do some simple math with screen.height to open a Fancybox in a particular aspect ratio relative to the current screen resolution.
var height = screen.height/4;
$("#test").fancybox({
'width' : 16/9. * height,
'height' : height,
'autoDimensions' : false
});
});

There's a pure CSS solution too. It works even when you resize.
.fancybox-type-iframe .fancybox-inner{
padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
height: 0 !important;
}
.fancybox-type-iframe .fancybox-inner .fancybox-iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I'm assuming you needed this for a video displayed with fancybox. Hence the iframe-related css.
P.S. I know this thread is old. But maybe someone still needs a solution.

Here's a pure css solution for responsive youtube popups that works with Fancybox 3. It's written in scss for clearness but can be converted to css online if you're not familiar with scss.
.fancybox-slide--iframe {
.fancybox-content{
margin: 0!important;
max-width: 100%;
width: 100%;
padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
height: 0 !important;
/* don't go full width on wide screens */
#media all and (min-width: 800px) {
max-width: 70%;
width: 70%;
padding-top: 39.34%; /* (9/16 * 70%) -- smaller aspect ratio in percents */
}
.fancybox-iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}

AFAIK, Fancybox right now, does not support this. However, You can control the dimension of fancy box size
("#yourbox").fancybox({
'width' : 680,
'height' 495,
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});

jQuery animate expand proportionally

I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.
What I want is to expand proportionally left-right-top-bottom by using animate.
Following is my coding. What I said above, it expand to bottom only.
$(document).ready(function() {
var theFrame = $("#FrmPatient", parent.document.body);
theFrame.animate({width: 650, height: 485}, 1000);
});

Try this:
<div id="frame"></div>
#frame {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #999;
}
$(function() {
var w = 400, h = 400;
$("#frame").animate({
width: w,
height: w,
marginLeft: -w/2,
marginTop: -h/2
}, 1000);
});
http://jsfiddle.net/GVj83/

You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.