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.

jquerytools tooltip on ajax issue

Ok im doing an ajax call every 15 seconds, this the first time "disable" the tooltip when ajax call was made, i fix this running a function an calling again the function that starts tooltip.
The problem is.. If there is one tooltip "open" when the ajax call is made, this and only this tooltip of this item is destroyed forever, the rest is working fine. until again you are on a open tooltip when the ajax run.
How can i fix this..
here is my code
function notifications() {
$.ajax(
{
type: "POST",
//data: dataparam,
url: "<?php echo $notifurl;?>",
success: function(msg)
{
if(msg !="")
{
$("#ajaxnotif").empty().html(msg);
$('.tooltip').remove();
ttp();
//$("#suggestDiv").show();
}
else
{
$("#ajaxnotif").empty().html(msg);
$('.tooltip').remove();
ttp();
//$("#suggestDiv").hide();
}
}
});
}
$(document).ready(notifications);
window.setInterval(function(){
notifications();
}, 15000);
var $tooltip = null;
var $tooltip2 = null;
var $tooltip3 = null;
function ttp() {
$tooltip = $('.marcleidnot[title]').tooltip({
delay:0,
slideInSpeed: 300,
slideOutSpeed: 200,
bounce: false,
/*bounce: false*/
relative: false, // <-- Adding this should sort you out
slideOffset: 5,
/* effect: 'slide',
direction: 'down',
slideInSpeed: 300,
slideOutSpeed: 200,*/
position: 'top center'
});
$tooltip2 = $('.fav[title]').tooltip({
delay:100,
slideInSpeed: 300,
slideOutSpeed: 300,
/*bounce: false,*/
relative: false, // <-- Adding this should sort you out
effect: 'slide',
direction: 'down',
/*slideInSpeed: 300,
slideOutSpeed: 200,*/
position: 'top center',
offset: [10, -2]
});
$tooltip3 = $('.nofav[title]').tooltip({
delay:100,
slideInSpeed: 300,
slideOutSpeed: 300,
/*bounce: true,*/
relative: false, // <-- Adding this should sort you out
effect: 'slide',
direction: 'down',
/*slideInSpeed: 300,
slideOutSpeed: 200,*/
position: 'top center',
offset: [10, -2]
});
}
$('body').click(function() {
$('.tooltip').remove();//remove the tool tip element
});

I think you aren't properly using the tooltip api. So instead of
$('.tooltip').remove();
do
$tooltip.tooltip("destroy");
$tooltip2.tooltip("destroy");
$tooltip3.tooltip("destroy");

Thanks to user3352495, i figure out what the problem was, then i figure out this
$tooltip = $('.marcleidnot[title]').tooltip("destroy");
$tooltip2 = $('.fav[title]').tooltip("destroy");
$tooltip3 = $('.nofav[title]').tooltip("destroy");
Wich is working fine until now
ACtually i found out i just need to delete this!
just restarting the function doing
ttp(); in the ajax solve this :D

The problem is that the tooltip in Jquery Tools doesn't create the .tooptip elements by default but only creates them when the tooltips appear for the first time. So in your case, when $tooltip appears there's only one .tooltip element associating with it, the other 2 haven't appeared yet.
To comprehensively remove all tooltips, you can use this plugin. It removes the .tooltip element if it's already there or unbinds the mouse events if it's not. After adding the plugin you can simply call $tooltip.tooltip('remove').

Add a dialog using jQuery using html generated by jQuery

I want to add a jQuery dialog using an string containing html code stored in a variable. Is it possible? Here is some of the tried code.
$("#remove-post").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true
});
$("body").delegate("a.delete-post", "click", function (e) {
e.preventDefault();
button = $(this);
remove_dialog_html = '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').dialog("open");
});

You can simply change the html of this element.
$('#remove-post').html('<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>');
jsFiddle Demo
Edit:
You can also avoid adding the dialog to the original HTML file, by creating and destroying it when you open and close the dialog.
$('<div></div>')
.appendTo('body')
.html(htmlContent)
.dialog({
autoOpen: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
$(this).remove();
}
});
jsFiddle Demo

You cannot initialize jQuery dialog like this since it is not in the DOM at the page load time (where jQuery initialize the stuff).
What you have to do is that initialize dialog after adding the html to the DOM.
Just before $('#remove-post').dialog("open");

Are you looking for something like this. Check the fiddle below. Changed the code as per your requirement if this is what you are looking for.
http://jsfiddle.net/8R7xA/1/
$("#remove-post").dialog({
autoOpen: false,
height:'auto',
width:'auto',
modal: true
});
$(document).ready(function(){
var remove_dialog_html= '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').html(remove_dialog_html);
$('#remove-post').dialog("open");
});

Please Refer this link link
Thanks!!
Edit: Try this:
$(document).ready(function () {
$("#divModifyDatesDialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
position: "center",
width: 550,
buttons: {
"Yes": {
click: function () {
-------------
},
"No": {
click: function () {
------
}
}
}
});

JQuery UI Accordion - Sortable Problems

I'm using this code to make the accordion sortable, and to make the active accordion panel move to the top of the stack:
$(function() {
var stop = false;
$("#ccaccordion h3").click(function( event ) {
if ( stop ) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$("#ccaccordion").accordion({
header: "> div > h3",
autoHeight: false,
change:
function(event, ui){
ui.newHeader.parent().prependTo(this);
}
}).sortable({
axis: "y",
handle: "h3",
stop: function() {
stop = true;
}
});
});
However it doesn't seem to be working. The standard demo code works fine with my html:
$(function() {
$( "#ccaccordion" ).accordion();
});
Any ideas where I'm going wrong?
Thanks in advance!

Sorted,
I wasn't wrapping the h3 and subsequent div with another div. Knew it would be something simple. Thanks for your time Thomas! Yet again it was just me being an idiot...

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.