We Keep Coding

jQuery UI - prevent resizing of dialog outside the parent div

PROBLEM:
When doing resize on dialog, I want to prevent it from going outside parent div dialog-container. For some reason containment is not working as I expected. What else can I try?
HTML:
<div id="top"></div>
<div id="dialog-container">
<div id="dialog">My dialog</div>
</div>
JS:
$(document).ready(function() {
jQuery("#dialog").dialog({
autoOpen:true,
modal: false,
resizable: true,
draggable: true,
closeOnEscape: true,
title: "Title",
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
}).parent().draggable({
containment: '#dialog-container'
}).resizable({
containment: '#dialog-container'
});
});
JSFIDDLE: https://jsfiddle.net/4zfmbktr/

First, I would STRONGLY advise moving to a newer jQuery UI Library. I found a lot of strange issues with the jQuery UI 1.8.18 selected in your Fiddle.
One of the things I found was that it was ignoring options applied to the resizable. If you read this article, it talks about how to set this option. Jump top the answer by Jason C. So that is where I started:
JavaScript
$(function() {
$("#dialog").dialog({
autoOpen: true,
modal: false,
resizable: false,
draggable: true,
closeOnEscape: true,
title: "Title",
open: function() {
$('.ui-widget-overlay').bind('click', function() {
$('#dialog').dialog('close');
})
}
});
var ui = $("#dialog").closest(".ui-dialog");
ui.draggable("option", "containment", '#dialog-container');
ui.resizable("option", "containment", '#dialog-container');
});
This did not work. Draggable containment worked, but resize containment failed HARD. I blame 1.8.18. I might test this again with the modern 1.12.1 just to see.
This does not mean you cannot use 1.8.18, if you can't change your library, here is a work around. There are caveats here.
Working example: https://jsfiddle.net/Twisty/2vaf3dr5/39/
JavaScript
$(function() {
$("#dialog").dialog({
autoOpen: true,
modal: false,
resizable: false,
draggable: true,
closeOnEscape: true,
title: "Title",
open: function() {
$('.ui-widget-overlay').bind('click', function() {
$('#dialog').dialog('close');
})
}
});
var ui = $("#dialog").closest(".ui-dialog");
ui.draggable("option", "containment", '#dialog-container');
ui.resizable({
handles: "n, e, s, w, se",
minHeight: 150,
minWidth: 150,
resize: function(e, ui) {
var contPos = $("#dialog-container").position();
contPos.bottom = contPos.top + $("#dialog-container").height();
contPos.right = contPos.left + $("#dialog-container").width();
contPos.height = $("#dialog-container").height();
contPos.width = $("#dialog-container").width();
if (ui.position.top <= contPos.top) {
ui.position.top = contPos.top + 1;
}
if (ui.position.left <= contPos.left) {
ui.position.left = contPos.left + 1;
}
if (ui.size.height >= contPos.height) {
ui.size.height = contPos.height - 7;
}
if (ui.size.width >= contPos.width) {
ui.size.width = contPos.width - 7;
}
}
});
});
I stripped away the pre-configured resizable option in dialog and wrote out the options directly. Again, containment didn't work here, so I had to make my own custom resize logic. In the end, this does what you'd expect.
One of the oddities or caveats, is that it's reading mouse movement and will continue to do so even when the mouse has exceeded the boundaries. So the Top and Left stop... but the width and height continue to grow. I do not know why and you know where I will point the finger.
I did try switching your libraries and the resize is... a bit better. Still odd with height but not with width. See here: https://jsfiddle.net/Twisty/2vaf3dr5/44/
That should get you going, I hope it helps.

Why is jQuery animate setting my div to display: none?

jQuery Animate does unintended things to my CSS. When animating paddingLeft, it sets div to display: none; that's unintended and I can't figure out why it does that. JSFiddle
<script>
$("#menu-toggle").click(function(event){
event.preventDefault();
if($('#sidebar-wrapper').width() == 0){
$("#sidebar-wrapper").animate({
width: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});$("#page-content-wrapper").animate({
paddingLeft: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});
}else{
$("#sidebar-wrapper").animate({
width: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});$("#page-content-wrapper").animate({
paddingLeft: 'toggle'
}, {
duration: 600,
queue: false,
complete: function() { /* Animation complete */ }
});
}
});
</script>
SOLVED:
Here's a Solve if anyone is interested: FixedFiddle

From the Docs:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the 'toggle' keyword must be consistently given as the value of the property being animated.
http://api.jquery.com/animate/
If my memory serves, and as the docs indicate, these shortcuts do extra work to literally "show" and "hide" the element on animation start and complete. It would seem jquery takes into account the initial display and then stores that to restore it later. Toggle is just a macro of "show" and "hide" and seems to function in the same way.

bxSlider onAfterSlide callback

Good morning all :) I've got an issue here, which is pain in my neck for 2 days already. I'm using bxSlider for images to slide on a page and I'm calling my own function in onAfterSlide callback. Everything works fine except one thing. When I quickly switching between slides my function is being called 2-3 times(I have 3 images on page), which is not good as it returns unexpected results. I can not use newest version of bxSlider, because the markup has been changed. I think this happens, because the animation is still not finished when the onAfterSlide callback is called.
This is how I call bxSlider:
$('#slider_bx').bxSlider({
mode: 'fade',
speed: 1000,
pause: 9000,
auto: true,
autoControls: false,
prevText: '',
nextText: '',
autoHover: true,
captions: false,
pager: true,
onBeforeSlide: function () {
if ($('.slide_in').length) {
$('.slide_in').hide();
}
},
onAfterSlide: function () {
if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
doCrazyStuff();
}
}
});
And this is my function:
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
setTimeout(function () {
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Any help appreciated. Thanks.
EDIT:
I've tried to add .stop(), but didn't helped.
$this.show().stop();
$this.stop().show();
$this.stop().rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
}).stop(); // throws an error

You can cancel a timeout or make a check to see if it's running.
If you want only the last timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
clearTimeout(crazyTimeout); // Cancel previous timeout
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
If you want only the first timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
return; // A timeout is still running: don't create new one
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}

Try using the
$('.slide_in').stop()
in after slide function I hope it works, if possible try to give code in fiddle it will be easy to help.

Viewing your code I think the problem is not with your code : but as you have set auto to true so the plugin timer is not stopped and is sliding the images in its regular interval.
so I hope the use of stopAuto() bxSlider function in your custom function will solve the problem. and don't forget to start the auto show after you have finished doing your stuff.
thanks

How to make JCarousel Vertical Scroller reverse scroll?

I was able to instantiate a working scroller using jQuery Jcarousel however I need it to reverse scroll. For example right now I have:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 1,
vertical: true,
scroll: 1,
animation: "slow",
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
What do I need to do to make the items scroll upwards instead of downwards?
Thank You in advance

actually, it's more simple than that.
scroll: -1
cheers!

Reverse autoscrolling is not implemented yet although you can code it quite easily.
This is the autoscrolling function in jCarousel:
/**
* Starts autoscrolling.
*
* #method auto
* #return undefined
* #param s {Number} Seconds to periodically autoscroll the content.
*/
startAuto: function(s) {
if (s != undefined)
this.options.auto = s;
if (this.options.auto == 0)
return this.stopAuto();
if (this.timer != null)
return;
var self = this;
this.timer = setTimeout(function() { self.next(); }, this.options.auto * 1000);
},
(Lines 687 to 706 in jquery.carousel.js )
Changing self.next(); to self.prev() should to the trick (can't test it right now, if you do please post the results).
Good luck :)

Just to add this to XaviEsteve answer (I can't find a place to add comment to his answer anyway).
Once I've changed self.next() to self.prev(), I have to change 'wrap' option to 'both' to make it work for me, like this.
jQuery('#mycarousel').jcarousel({
auto: 1,
wrap: 'both',
vertical: true,
scroll: 1,
start: 30,
initCallback: mycarousel_initCallback
});

Try this, it should work
$(document).ready(function() {
$('#mycarousel').jcarousel({
vertical: true,
wrap: 'circular',
animate: 'slow',
});
$('#mycarousel').jcarouselAutoscroll({
interval: 3000,
target: '-=1', /*if you change - on + it will scroll up*/
autostart: true
});
});

jQuery UI Dialog Box - does not open after being closed

I have a problem with the jquery-ui dialog box.
The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.
How can I call the dialog box back without refreshing the actual page.
Below is my code:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Thanks

You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it.
Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.

I solved it.
I used destroy instead close function (it doesn't make any sense), but it worked.
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

on the last line, don't use $(this).remove() use $(this).hide() instead.
EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.

I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.

For me this approach works:
The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});

<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>

This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...
The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.
Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.
From the documentation:
destroy()
Removes the dialog functionality completely. This will return the element back to its >>pre-init state.
This method does not accept any arguments.
That said, only destroy or remove on close if you have a good reason to.

$(this).dialog('destroy');
works!

.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs

I use the dialog as an dialog file browser and uploader then I rewrite the code like this
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
everything seems to work great.

I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -
the important setting appeared to be
oneInstance: false
so, now i have it like this -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
and everything works just fine
hope this helps somebody
O.

The jQuery documentation has a link to this article
'Basic usage of the jQuery UI dialog'
that explains this situation and how to resolve it.