I'm trying to create a dialog using jQueryUI and I'm running into 2 issues that I didn't expect and haven't found a solution that seems to work for me. Using this code:
$( '<div/>' ).load( $this.attr( 'href' ) ).dialog({
height: 'auto',
maxWidth: 600,
position: 'center',
resizable: false,
title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
width: 'auto',
resize: function( e, ui ) {
$(this).dialog( 'option', 'position', 'center' );
}
});
I end up with a dialog that's positioned such that the upper left corner is at the center of the screen (or thereabouts) and whose width seems wholly dependent on the text it contains. Is there something obvious that I'm missing? I'd really like for the dialog as a whole to be center aligned on both axes and for the width to not exceed 600px.
Thanks.
Your width: 'auto' is the culprit, I think. Also, the resize function doesn't apply to whether the browser window resizes, that was just if you resize the dialog itself. Since you set resizable to false, that won't happen.
How about setting a minWidth as well?
$( '<div/>' ).attr('id', 'my-dialog').load( 'hello.html' ).dialog({
height: 'auto',
maxWidth: 600,
minWidth: 500,
position: 'center',
resizable: false,
title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
});
$(window).resize(function(){
$('#my-dialog').dialog( 'option', 'position', 'center' );
});
More in the documentation: http://api.jquery.com/resize/
Related
When I use transparent Windows, an area 5px from the windows edge cannot respond to DOM events.
let captureWin = new BrowserWindow({
fullscreen: os.platform() === 'win32' || undefined,
width: display.bounds.width,
height: display.bounds.height,
x: display.bounds.x,
y: display.bounds.y,
transparent: true,
frame: false,
// skipTaskbar: true,
// autoHideMenuBar: true,
movable: false,
resizable: false,
enableLargerThanScreen: true,
hasShadow: false,
})
captureWin.setAlwaysOnTop(true, 'screen-saver')
captureWin.setVisibleOnAllWorkspaces(true)
captureWin.setFullScreenable(false)
captureWin.loadFile(path.join(__dirname, 'capture.html'))
In the screenshot window, run:
document.addEventListener('mousemove', e => {
console.log([e.x, e.y])
})
When the mouse moves within 5px of the window edge, the console does not print out the mouse position.
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 use gridstack (https://github.com/troolee/gridstack.js/tree/master) which uses jQueryUI's "Resizable" behaviour. I am trying to set aspectRatio: true on only one of the widgets (tiles) in the grid but there is no obvious way to do this.
Here's the js to initialize gridstack:
grid = $(".grid-stack").gridstack
({
width: 12,
height: 9,
animate: true,
always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
draggable:
{
handle: ".box-title-bar"
},
resizable:
{
aspectRatio: "true",
handles: "se"
}
}).data("gridstack");
Setting resizable: { aspectRatio: "true" } sets it for all tiles in the grid; however, I can't figure out how to set this for only one of the tiles/widgets.
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});
},
});
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>