I have the following jqueryui dialog:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 420,
hide: 'slide',
modal: true,
buttons: {
'Annuler': function() {
$(this).dialog('close');
},
'Envoyer votre message': function() {}
}
When I display it with:
$('#question-annonceur').click(function() {
$('#dialog').dialog('open');
});
It's pretty centered. But when I scrolled vertically, it"s not centered anymore.
In fact, the dialog is still centered (regarding the scrollbar position set by the user), but the scrollbar had been scrolled up to the top of the window, and then, the dialog is not centered anymore (since it was centered regarding the new scrollbar position).
It's there a property I can set so that the scrollbar is not reset at the top like this?
Thanks.
Changing the CSS from position:absolute to position:fixed works for me :
.ui-dialog { position: fixed; padding: .1em; width: 300px; overflow: hidden; }
jQuery(window).scroll(function() {
jQuery('#dialog').dialog('option','position','center'); });
works for me in jquery 1.9
This is assuming your dialog has id="dialog"
Related
I have a Jquery UI dialog and I close it by having it sized to zero and moving its position as in:
$('#myDialog').dialog({
...
beforeClose: function() {
$("#myDialog").dialog("widget").animate({
'position': 'absolute',
'left': '1250px',
'top': '20px',
'height': '0px',
'width': '0px'
}, 600);
},
...
This works fine but not if the window is resized because the goal is to have it move towards another element. I tried the following, but it does not work:
beforeClose: function() {
$("#myDialog").dialog("widget")
.animate({'height': '0px','width': '0px'},400)
.animate({'position': { my: "right top", at:"left bottom",
of: "#myButton" }},400);
},
This does resize the dialog to zero but the positioning does not work at all.
Can you suggest any way to do this?
I have a dialog that gets filled by an ajax call. I want to limit the max-height of dialog and also allow it to be scroll-able if this max-height is exceeded. The code below does exactly what I want.
The catch is I can not move the top of the dialog from the top position. I can move it left and right. I can't use center either as the dialog is displayed in a large scroll-able window. If I use firebug I can adjust the top property but cannot find where it is being set to zero.
$("#your-dialog-id").dialog({
open: function(event, ui) {
$(this).css({'max-height': 500, 'overflow-y': 'auto'});
},
autoOpen:false,
modal: true,
resizable: false,
draggable: false,
width: '690',
closeOnEscape: true,
position: 'top'
});
I want to adjust the dialog's y position so it is 20px from the top of the window. Any idea what I can do?
Changing the last value solved the problem:
position: ['center',20]
http://jsfiddle.net/chrisloughnane/wApSQ/3
The easiest way is:
$("#dialog").dialog({ position: { my: "center", at: "top" } });
using Jquery UI 1.11.4
var Y = window.pageYOffset;
$( "#dialogJQ" ).dialog({
modal: true,
closeOnEscape: false,
width:'auto',
dialogClass: 'surveyDialog',
open: function(event, ui) {
$(this).parent().css({'top': Y+20});
},
});
i am using jquery ui draggable do drag a div around. whats the best way to smoothly ease out the drag after the drag stopped?
assuming the drag stopped abruptly.
thank you
Implementing draggables with easing might work for you. This is a simplified solution from my answer to a previous thread, which was more specific:
JQuery draggable with ease
HTML:
<div id="draggable">
</div>
CSS:
#draggable {
position: relative;
width: 100px;
height: 100px;
background-color: whitesmoke;
border: 2px solid silver;
}
Javascript:
$(function() {
$("#draggable").draggable({
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
var p = ui.helper.position();
$(this).stop().animate({
top: p.top,
left: p.left
},1000,'easeOutCirc');
}
});
});
jsFiddle demo: http://jsfiddle.net/NJwER/26/
I am unable to drag or resize a dialog box. I have downloaded all dependencies and tried various settings in options, but still no joy:
<script type="text/javascript">
function dialog(){
$("#paragraph").dialog({
title: 'This is a title',
width: 300,
height: 50,
modal: true,
draggable: true,
autoOpen: false,
buttons: {
'Remove': function () { // remove what you want to remove
// do something here
alert("this is a test alert!");
$(this).dialog('close');
$("#flex1").flexReload();
},
Cancel: function () {
$(this).dialog('close');
}
}
});
$("#paragraph").dialog("open");
};
</script>
<p id="paragraph">This is some paragraph text</p>
Downloads of the jQuery UI library are customizable. If your copy doesn't include the 'Draggable' and 'Resizable' interactions, your dialog will not be draggable or resizable.
Well maybe add resizable option and set it to true.
Also the dialog is draggable by the title bar not the entire dialog body.
Any good?
Right now, I have a website that someone made for me, and unfortunately, I'm stuck. I understand a little, but remain to be a total novice. I have pictures I want for the pop-up, but whenever I set the height and width to 'auto', the box locates to the bottom of the page?
I need it to auto center on resize as well if possible.
Please help me recreate my code, anyone? Thanks.
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'></div>").load(url)
.dialog({
autoOpen: true,
closeOnEscape: true,
height: '1012',
modal: true,
position: ['center', 'center'],
title: 'About Ricky',
width: 690
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
});
}
</script>
The problem you are having is that when the dialog opens it is empty and the position is calculated. Then you load the content and it does not automatically recalculate the new center position. You need to do this yourself in the onComplete event handler. See below, I have also put in some nice loading text :)
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
height: '1012',
modal: true,
position: ['center', 'center'],
title: 'About Ricky',
width: 690
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>