We Keep Coding

jQuery UI Resizable never reaches the full width with aspect set

I am using jQuery ui resizable with an aspect ratio set to 16/9.
$(".select").resizable({
containment: "#container",
aspectRatio: 16 / 9,
grid: 1,
stop: function (e, ui) {},
});
I want to be able to drag the resizable element full width to match the container but if never quite reaches it see this image.
You should notice the gap far right.
Here is a working demo I am testing with.
https://output.jsbin.com/cimorikefu/2/
I want to be able to drag the element full width any suggestions?

What you encounter seems to be caused by combination of miscalculations in jQuery UI Resizable plugin. It's hard to label those as 'bugs': when it was written, the code worked just fine.
Some of those issues are covered in the ticket created 9 (!) years ago. The last message there was written 5 years ago, so there's little chance of fixing that; the world has moved on.
Here's the suspicious parts of the code (1.12 source is analyzed):
// in _mouseStart()
this.sizeDiff = {
width: el.outerWidth() - el.width(),
height: el.outerHeight() - el.height()
};
// ... in resize()
woset = Math.abs( that.sizeDiff.width + // ... )
This part seems to ignore the fact that elements might have different box-sizing models, always attempting to process those based on content-box - and take border width into account.
While the behavior of outerWidth() and width() has been corrected in jQuery 1.8, the corresponding adjustments didn't reach Resizable source in time. Now the PR prepared and listed in the linked ticket is no longer applicable (after the code has been refactored in ~1.10).
Still, there's more:
if ( woset + that.size.width >= that.parentData.width ) {
that.size.width = that.parentData.width - woset;
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
}
// ...
if ( !continueResize ) {
that.position.left = that.prevPosition.left;
that.position.top = that.prevPosition.top;
that.size.width = that.prevSize.width;
that.size.height = that.prevSize.height;
}
In this case pRatio is set, which means whenever your resizing operation is about to make the resizable object the same size as container, its width is reset to the previous size. So if you move your mouse fast enough, the resizable element gets stuck way before the hitting the container's borders.
While the first issue here might be mitigated a bit by replacing border with outline when styling .ui-widget-content, the only way to fix the second part is to fix the plugin's code.

How to properly use a variable to scrollLeft within the animate function

First, thanks in advance for any help.
Second, I would like to mention that I have looked at different questions related to this topic as well as read documentation for both animate() and scrollLeft() on MDN I think my question is actually more based on syntax rather than function usage and that is why the other questions have not been as helpful to me.
Now, on to the issue. I am attempting to modify javascript code that I have previously written so that one function can react to the viewport of any user.
On the HTML side, I have a table with one <tr> and 3 <td>'s. The 3 <td>'s are filled with a picture and info and when the user clicks on buttons below, the table scrolls itself to the appropriate content. The buttons work fine. The problem is actually that the images are bigger than the viewport (on any device) and so on initial page load, the image needs to be scrolled by a distance proportional to both the viewport and the asset size (I load different assets based on viewport also). The formula for scroll distance, I discovered, is
0.5( assetWidth ) - 0.5( viewportWidth ).
So, here is the JS I have come up with (this is all inside a jQuery(document).ready(function($){
var scrollDistance;
if ($('#interactive-row:visible').length == 0) {
//Viewport > 801px
var assetWidth = 1920;
console.log("bouta set scrolDistance");
scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
} else {
//Viewport < 800px
var assetWidth = 1428;
scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
}
//scroll to zero so that whne user goes "back" slider position is reset (w/o variable lastClick gets messed up)
$('.table-container').animate({
scrollLeft: 0
}, "slow");
console.log( "Scroll Distance is " + scrollDistance + " calculation is about to begin." );
//move slider to middle of SSI screen
$('.table-container').animate({
scrollLeft: += scrollDistance.valueOf()
}, "slow");
The problem (I believe) is on the second-to-last line at which point my intentions are to have the browser scroll to whatever number is inside scrollDistance.
Note: here is what firefox and chrome say: "SyntaxError: expected expression, got '+='[Learn More]"
Also, I have already tried using scrollDistance with out adding the .valueOf(). I put that on recently in case there was some sort of type issue in javascript that I wasn't aware of.
Feel free to take a look at this graphic to better understand what I am trying to do. Graphic of what browser should display
Thanks in advance for the help, I am new to Javascript and anything at all that you all can tell me (even just general pointers about how I write my code) is much appreciated!
Edit: It just occurred to me that it may also worth noting that my console.log() is not working at all but I could care less about that if the scroll starts working :D

Basic JS - Is this function okay?

I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position is dynamic. The size of the controls may also change.
I've written a function that runs on load and resize. It gets the height of the image and the height of the controls, subtracts the latter from the former, divides by two, and then uses that number as the controls' margin-top.
It works, but I'm questioning if I'm getting and using all the variables correctly. Does JavaScript read in order? Where it runs the first line, then the next, then the next... I'm strong in CSS but JS has always been a crutch.
Can I write this more efficiently?
function centerCarouselControls() {
var carouselImage = $('.carousel-card > img');
var carouselControls = $('.owl-nav > div');
var carouselHeight = carouselImage.outerHeight();
var controlHeight = carouselControls.outerHeight();
var controlMargin = (carouselHeight - controlHeight) / 2;
carouselControls.css('margin-top', controlMargin);
}
$('.carousel-card > img').load(centerCarouselControls);
$(window).on('resize', centerCarouselControls);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I feel like this might be the type of question that gets flagged on here for not being specific enough. If that's the case, could someone please point me to a community where this would be more appropriate? Thanks!

In some browsers your code works like firefox 51, but it is more complete code this:
carouselControls.css('margin-top', controlMargin + 'px');

jQuery's $(selector).position().left Sometimes Fails in Firefox, Chrome Browsers

I have a content slideshow:
slide container
|--> wrapper
|------> slide1, slide2, etc.
that works as simple as calculating wrapper's position X and slide's position X to determine where to slide the wrapper for the next/previous slide to show up within container's viewport. It's pretty straight forward.
For Firefox and Chrome I am using CSS3 transform and transition-duration to animate the slides. Everything works perfect. Almost.
The problem is only when I click next button very fast. I am using jQuery's
$(selector).position().left
to read the slide's position X (left) and position becomes 0 (instead of expected, say, 300px). I do have a flag isAnimating to prevent users from going too fast but that does not help either. It does prevent from scrolling content too fast but position left may still be 0 as if something else is causing it to fail to determine.
I did a brief search and discovered that if it was image being loaded, some browsers would fail to determine its position until loading is over. However, each slide has an image but inside of it. The slide's CSS seems to have all widths and margins set fine.
The question is why may this be happening based on the scenario I described and possibly what can be improved to determine position X at all times for Firefox, Chrome browsers?

I've decided that if offsetLeft is not reliable for me at all times, I could use width of an element and its index position within container to figure out position X
var newWrapperPos = undefined;
$(lotWrapper).children('div').each(function(index){
if($(this).attr("id") === "slot"+id){
var width = $(this).width();
newWrapperPos = index * width;
return false;
}
});
//now I can shift wrapper to position = newWrapperPos
Sorry I couldn't share the code - it is a bit time consuming to rip off all pieces of functionality involved. But if somebody has a better answer, let me know. For now this works fine for me.

jQueryui animation with inital undefined height

See the following fiddle:
[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]
http://jsfiddle.net/NYZf8/1/ (view in different screen sizes, so that ideally the image fits inside the %-width layouted div)
The image should start the animation from the position where it correctly appears after the animation is done.
I don't understand why the first call to setMargin() sets a negative margin even though the logged height for container div and img are the very same ones, that after the jqueryui show() call set the image where I would want it (from the start on). My guess is that somehow the image height is 0/undefined after all, even though it logs fine :?
js:
console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());
$('img').show('blind', 1500, setMargin);
function setMargin() {
var marginTop =
( $('img').closest('div').height() - $('img').height() ) / 2;
console.log('marginTop: ' + marginTop);
$('img').css('marginTop', marginTop + 'px');
}
setMargin();

Interesting problem...after playing around with your code for a while (latest update), I saw that the blind animation was not actually firing in my browser (I'm testing on Chrome, and maybe it was firing but I wasn't seeing it as the image was never hidden in the first place), so I tried moving it inside the binded load function:
$('img').bind('load', function() {
...
$(this).show('blind', 500);
});
Now that it was animating, it seemed to 'snap' or 'jump' after the animation was complete, and also seemed to appear with an incorrect margin. This smacks of jQuery not being able to correctly calculate the dimensions of something that hadn't been displayed on the screen yet. On top of that, blind seems to need more explicit dimensions to operate correctly. So therein lies the problem: how to calculate elements' rendered dimensions before they've actually appeared on the screen?
One way to do this is to fade in the element whose dimensions you're trying to calculate very slightly - not enough to see yet - do some calculations, then hide it again and prep it for the appearance animation. You can achieve this with jQuery using the fadeTo function:
$('img').bind('load', function() {
$(this).fadeTo(0, 0.01, function() {
// do calculations...
}
}
You would need to work out dimensions, apply them with the css() function, blind the image in and then reset the image styles back to their original states, all thanks to a blind animation that needs these dimensions explicitly. I would also recommend using classes in the css to help you manage things a little better. Here's a detailed working example: jsfiddle working example
Not the most elegant way of doing things, but it's a start. There are a lot more easier ways to achieve seemingly better results, and I guess I just want to know why you're looking to do image blinds and explicit alignment this way? It's just a lot more challenging achieving it with the code you used...anyways, hope this helps! :)