Develop Reference

Bootstrip 4 tooltip position: auto right

I want my tooltip to be on the right of the elements on desktop, because it fits my design best. However this however raises an issue when working on a smaller screen. The bootstrap 3 documentation says it supports auto right placement, which should prefer the tooltip on the right and if that is impractical it will auto pick a side. I am using bootstrap 4 and I tried using that option, but it wont work.
Is there any way to achieve the same result in bootstrap 4?

If using 'right auto' doesn't work you could use a function to return the value based on screen size:
placement: function() {
return $(window).width() > 767 ? 'right' : 'auto';
}
This isn't a responsive solution as it doesn't update if the window size changes, but it should do for most cases. If you want fully responsive behavior you'll need re-initialize tooltips on size change.

Isotope issue with jQuery dialog box

It is a bit difficult to explain my issue but I will try using images.
Demo: http://jsfiddle.net/H8Qbn/13/
I try to automatically arrange jQuery dialogs using Isotope.
The first picture shows that everything is working just fine.
The second picture shows what is happening when trying to resize the 1st jQuery dialog. It is resizing just fine and all other dialogs are automatically arranged.
When I try to arrange the second dialog it first moves according its position(top, left) and then resizes and all other dialogs are not automatically arranged.
The third dialog behaves exactly the same as 2. It moves according its position (top, left) and is not arranged automatically.
Any suggestions?

Isotope is not made for draggable dialog boxes; see what the plugin author says regarding this type of functionality.
EDIT Fiddled around with a few more things and got the layout to rearrange when a dialog is closed with .remove(); however, dragging is not suported (see above) and resizing manually won't work either. Why do you need manual resizing of dialog boxes? Can't that be done programmatically?

The jquery masonry plugin can compute the new position when you call it with the masonry("reload") function on the surrounding container after you have resized the dialog boxes or add or remove items. I used it in my Javascript when I add or remove an image to my surrounding container. You can see the Masonry plugin working live in my homepage at the web address http://www.chihoang.de.
This is my prepend and append function with masonry("reload") at the end:
if (ele.Additem == "Append") {
container.append($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
} else if (ele.Additem == "Prepend") {
container.prepend($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
}
And this is my remove function:
$j('.brick').remove(":contains('" + ele.Headline + "')");
container.masonry('reload');

jQuery sortable container scroll div with overflow auto

I have been pulling my hair out trying to make this work.
I have two connected sortables, defined like so:
var sortlists = $("#List1, #List2").sortable(
{
appendTo: 'body',
tolerance: 'pointer',
connectWith: '#List1, #List2',
revert: 'invalid',
forceHelperSize: true,
helper: 'clone',
scroll: true
});
Here is a link to an example of jsfiddle
Because of the page setup, both sortables are being contained in div's with overflow: auto they are also wrapped in parent containers with overflow set to hidden. For arguments sake, lets say there is no way around that.
Is there a way to make the container element scroll when the helper is being positioned towards the lower or upper edge of the container?
Any help would be appreciated!

With helper:'original', I get the scrolling behaviour you seek, (in Opera 11.61).
forked fiddle
Edit: Here's a version of the fiddle with "ganged-scrolling"

I think this is what you want. Drag from div (with scrollable) to div (with scrollable) without the dragged item appearing behind the div.
http://jsfiddle.net/nURN5/1/
.document.body.appendChild //required to add code with link...
The next best approach would be to actually drag a clone of the item...

The forked fiddle with "ganged-scrolling" unfortunately exhibits the very nasty side effect of constraining (visually) the selected item to it's own div.

jQuery : Animate Widths of Adjacent Floating Divs

I'm playing around with a little jquery animation and trying to achieve a very specific effect.
If anyone remembers the old Xbox menus with the panes or 'blades' as they called them, I'm going for something like that using a series of left floating divs. When the page loads, one pane is active and has a large width, displays some information etc. while the other panes are condensed into a very small width. When a smaller pane is clicked on the active pane shrinks to a narrow width, and the clicked expands to display content.
Essentially the HTML looks like this:
<div class="pane active">
</div>
<div class="pane">
</div>
<div class="pane">
</div>
I'm currently using javascript (jquery) to define all the widths based on the window size so that the panes fill up the whole screen.
Here is the basic jquery event that handles the shrinking and expanding.
// $active is the current wide pane
// $(this) is the clicked pane
// activeWidth is a predefined constant
$active.animate( { 'width' : '100px' }, 200 );
$(this).animate( { 'width' : activeWidth }, 200);
The only problem I am having is occasionally during this animation, the shrink/grow appear to start at different times (I'm not sure) and create an unpleasant empty space to the far right of the page.
Is there a way to ensure that these two actions happen consistantly in sync? I considered replicating this using absolute positioning.
I'm at work so I can't upload a diagram, but I will try to later if it's too confusing.

The jQuery documentation says there's a callback function in the animate parameters. "This can be useful for stringing different animations together in sequence."
Not sure I'm 100% understanding your question, and without seeing more of your code, can you do something like:
$active.animate( { 'width' : '100px' }, 200, function(){
$(this).animate( { 'width' : activeWidth }, 200);
});

JQuery Dialog with constant aspect ratio

I need to display an image in a resizable dialog (so far all the specific image popup libraries I have tried do not fit my needs).
All I want to do is maintain the aspect ratio during resizing. Sounds easy, but it's not.
I thought something like this might work, but no dice:
var d = $("").dialog({title:title, width:400, height:400});
d.resizable( "option", "aspectRatio", true );
Any pointers greatly appreciated, tks

Due to the way it's hooked in, I find it easiest to just do the resizable portion yourself, like this:
$("div").dialog({
title:"Title",
width:400,
height:400,
resizable: false
}).parent().resizable({
handles: 'n,e,s,w,se,sw,ne,nw',
aspectRatio: true
});​​​
You can view a demo here, you can also destroy and re-create it...but that's a bit wasteful, so just create it above, specify the max/min height/width in the resizable instead of the dialog if needed. This should work: .parent().resizable("option", "aspectRatio", true), but it doesn't due to the way the widgets hooked in, so the eaiest solution is to just create the resizable yourself with the options you want when you create the dialog.
Side note: you're using .parent() here because you wan the dialog container that contains the title bar and your content. It's created/wrapped like this when you create the dialog.