Related
I have draggable object in the page, and it has snap setting for the region.
<div class="drag-bound">
<div id="obj"></div>
</div>
$('#obj').draggable({
snap: ".drag-bound",
snapTolerance: 5
})
So now if $('#obj') is dragged near the border of ".drag-bound", it gets snapped there.
The problem is I want $('#obj') is snapped to the center of the ".drag-bound", too.
Is there any good idea how to make it happen?
Should I make custom code inside of drag event handler?
Is there any good and easy option inside of it?
Alright, so far from my investigation, there seems not to be a good option to accomplish my purpose.
I have made custom code inside of drag event handler like following:
fn.branding.$resizable.draggable({
snap: ".resize-bound",
snapTolerance: 5,
drag: function(event, ui) {
var ui_w = ui.helper.width();
var ui_h = ui.helper.height();
var margin = $(this).draggable("option", "snapTolerance");
/////////////////////////////////////////////////////////
// do custom snapping here
//
if (!(Math.abs((ui.position.left + (ui_w)/2) - (fn.branding.modal_preview_width/2)) > 2 * margin)) {
ui.position.left = Math.round((fn.branding.modal_preview_width - ui_w)/2);
}
if (!(Math.abs((ui.position.top + (ui_h)/2) - (fn.branding.modal_preview_height/2)) > 2 * margin)) {
ui.position.top = Math.round((fn.branding.modal_preview_height - ui_h)/2);
}
});
Is it possible to change top and left positions (get current values and change them) of jQuery UI datepicker. Please note that i need to change position, not set margin as it is in other examples.
Sure it is. As there's always only one datepicker active, you can select active datepicker with:
var $datepicker = $('#ui-datepicker-div');
and change its position:
$datepicker.css({
top: 10,
left: 10
});
EDIT
Whoah, tricky one. If you set top or left position in beforeShow, it gets overriden again by datepicker plugin. You have to put css changes in a setTimeout:
$("#datepicker").datepicker({
beforeShow: function (input, inst) {
setTimeout(function () {
inst.dpDiv.css({
top: 100,
left: 200
});
}, 0);
}
});
DEMO: http://jsfiddle.net/BWfwf/4/
Explanation about setTimeout(function () {}, 0): Why is setTimeout(fn, 0) sometimes useful?
If you get really stuck you can edit your jquery-ui-[version].custom.js. The function that controls the position where the calender will appear is:
_findPos: function(obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
return [position.left, position.top];
},
I have some custom code that uses a CSS3 transformation to zoom the page in or out based on its width. This throws out the screen coordinates that the calendar widget relies on. I added some custom code to the _findPos to detect and handle the zoom level. Modified code looks like this:
_findPos: function(obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
/* Custom Code for Zoom */
var zoomLevel = 1;
var minW = 1024;
if ($(window).width() > minW)
{ zoomLevel = $(window).width() / minW;}
return [position.left, position.top/zoomLevel];
},
May be an old question, but ran into the problem myself just today and could not get other suggestions to work. Fixed it alternatively (using .click(function(){}) and wanted to add my two cents.
I have an input field with the id sDate which, when clicked, displays the datepicker.
What I did to solve the problem was add a click routine to the #sDate field.
$('#sDate').click(function(){ //CHANGE sDate TO THE ID OF YOUR INPUT FIELD
var pTop = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING
var pLeft = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING
$('#ui-datepicker-div').css({'left':pLeft, 'top':pTop});
});
your solution works provided you run it after calling the datepicker in the code, I tried calling it before but it didn't work, so I tried to understand how it worked for you.
I have adapted the datepicker in the context of an input field which is fixed at the top of the page to scroll. The datepicker was lost ...
Here is my example code for adaptation in a context of datepicker which becomes dynamically fixed:
Example found on w3schools.com: https://www.w3schools.com/howto/howto_js_sticky_header.asp
HTML:
<div class="padding-16 center" id="resa_nav">
<div style="margin: 24px 0 0;">
<label for="date_selector"
class="text-gray">Choose a date</label>
<input type="text" id="date_selector" name="date_selector" class="padding-small">
</div>
</div>
CSS:
.sticky {
position: fixed;
top: 0;
width: inherit;
background: white;
box-shadow: 0px 0px 7px 4px #69696969;
}
JS:
// init datepicker
$('#date_selector').datepicker();
// When the user scrolls the page, execute myFunction
window.onscroll = function() { myFunction() };
// Get the header
var header = document.getElementById('resa_nav');
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
// set block sticky
header.classList.add('sticky');
// adjust datepicker position
// attach a namespace for unbind click later in "non-sticky" context
$('#date_selector').on('click.sticked', function(){
var top = '10px';
var left = '10px';
$('#ui-datepicker-div').css({'left': left, 'top': top});
});
}
else {
// remove sticky
header.classList.remove('sticky');
// unbind the second event 'click' for retrieve the
// default of settings in "non-sticky" context
$('#date_selector').off('click.sticked');
}
}
// END FUNCTION
hope to help!
just add css as below for datepicker
.datepicker {
top: -150px;
/* adjust value as per requirement. if not work try with addin !important*/
}
I am using the jquery-ui draggable component with jquery.gantt here. I could do enable drag on the items easily by $('.ganttRed').draggable() but the problem with this is that once we start scrolling the graph left to right using the slider below, the elements that are moved remain where they are instead of scrolling with the graph.
I looked through the source and from my understanding the margin-left is being changed during the scrolling; but jquery-ui uses the left attribute and in the presence of left the element keeps its position. My CSS knowledge ends just about there so if any of you are willing to provide any suggestions on how this can be fixed; I will greatly appreciate it.
I have a created a fiddle demonstrating the problem at: http://jsfiddle.net/Y2cxa/. In order to see the behavior I am speaking about:
Scroll the graph (either with your mouse wheel or the slider at the bottom); things should look and behave as expected.
Move any of the magenta(-ish) bars around and then scroll.
Again, thank you for your time and any assistance will be greatly appreciated.
Best regards
You have probably solved this or done something else by now but since I needed this aswell i solved it.
Got a solution for you here:
http://jsfiddle.net/Y2cxa/18/
First I simply copied the left value to margin-left and then removed the left value completely, however this led to some strange numbers.
To solve this I compared the start value of left with the final value of left and applied the same difference in pixels to margin-left!
Simply replace:
$('.ganttRed').draggable({axis:'x'});
with:
$('.ganttRed').draggable({
axis:'x',
start: function(event, ui) {
$(this).data("startx",$(this).offset().left);
},
stop: function(event, ui) {
var change = $(this).offset().left - $(this).data("startx");
var value = $(this).css('margin-left');
value = value.split("px");
value = parseInt(value[0]) + change;
$(this).css('margin-left', value);
$(this).css('left', '');
}
});
I believe below is a better solution and I am using it in my application
For vertical and horizonal dragging
$('.ganttRed').draggable(
{
start: function (event, ui) {
$(this).data("startx", $(this).css('left').split("px")[0]);
$(this).data("starty", $(this).css('top').split("px")[0]);
},
stop: function (event, ui) {
var left = parseInt($(this).css('left').split("px")[0]);
var changex = left - parseInt($(this).data("startx"));
var top = parseInt($(this).css('top').split("px")[0]);
top -= top % 24;
$(this).css('top', top);
var changey = top - parseInt($(this).data("starty"));
}
});
changex, changey will be used in calculation while updating in database
For horizontal resizing
$(".ganttRed").resizable({ handles: 'e, w' });
I'm working on a browser based app, currently I'm developing and styling for the ipad safari browser.
I'm looking for two things on the ipad: How can I disable vertical scrolling for pages that don't require it? & how can I disable the elastic bounce effect?
This answer is no longer applicable, unless you are developing for a very old iOS device... Please see other solutions
2011 answer: For a web/html app running inside iOS Safari you want something like
document.ontouchmove = function(event){
event.preventDefault();
}
For iOS 5 you may want to take the following into account: document.ontouchmove and scrolling on iOS 5
Update September 2014:
A more thorough approach can be found here: https://github.com/luster-io/prevent-overscroll. For that and a whole lot of useful webapp advice, see http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
Update March 2016: That last link is no longer active - see https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html for the archived version instead. Thanks #falsarella for pointing that out.
You can also change the position of the body/html to fixed:
body,
html {
position: fixed;
}
To prevent scrolling on modern mobile browsers you need to add the passive: false. I had been pulling my hair out getting this to work until I found this solution. I have only found this mentioned in one other place on the internet.
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault);
}
You can use this jQuery code snippet to do this:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
This will block the vertical scrolling and also any bounce back effect occurring on your pages.
overflow: scroll;
-webkit-overflow-scrolling: touch;
On container you can set bounce effect inside element
Source: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
I know this is slightly off-piste but I've been using Swiffy to convert Flash into an interactive HTML5 game and came across the same scrolling issue but found no solutions that worked.
The problem I had was that the Swiffy stage was taking up the whole screen, so as soon as it had loaded, the document touchmove event was never triggered.
If I tried to add the same event to the Swiffy container, it was replaced as soon as the stage had loaded.
In the end I solved it (rather messily) by applying the touchmove event to every DIV within the stage. As these divs were also ever-changing, I needed to keep checking them.
This was my solution, which seems to work well. I hope it's helpful for anyone else trying to find the same solution as me.
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
'touchmove',
function(e) {
e.preventDefault();
}
);}
Code to To remove ipad safari: disable scrolling, and bounce effect
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
If you have canvas tag inside document, sometime it will affect the usability of object inside Canvas(example: movement of object); so add below code to fix it.
document.getElementById("canvasId").addEventListener("touchmove", function (e) {
e.stopPropagation();
}, { passive: false });
none of the solutions works for me. This is how I do it.
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Try this JS sollutuion:
var xStart, yStart = 0;
document.addEventListener('touchstart', function(e) {
xStart = e.touches[0].screenX;
yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove', function(e) {
var xMovement = Math.abs(e.touches[0].screenX - xStart);
var yMovement = Math.abs(e.touches[0].screenY - yStart);
if((yMovement * 3) > xMovement) {
e.preventDefault();
}
});
Prevents default Safari scrolling and bounce gestures without detaching your touch event listeners.
Tested in iphone. Just use this css on target element container and it will change the scrolling behaviour, which stops when finger leaves the screen.
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
improved answer #Ben Bos and commented by #Tim
This css will help prevent scrolling and performance issue with css re-render because position changed / little lagging without width and height
html,
body {
position: fixed;
width: 100%;
height: 100%
}
For those who are using MyScript the Web App and are struggling with the body scrolling/dragging (on iPad and Tablets) instead of actually writing:
<body touch-action="none" unresolved>
That fixed it for me.
You can use js for prevent scroll:
let body = document.body;
let hideScroll = function(e) {
e.preventDefault();
};
function toggleScroll (bool) {
if (bool === true) {
body.addEventListener("touchmove", hideScroll);
} else {
body.removeEventListener("touchmove", hideScroll);
}
}
And than just run/stop toggleScroll func when you opnen/close modal.
Like this toggleScroll(true) / toggleScroll(false)
(This is only for iOS, on Android not working)
Try this JS solution that toggles webkitOverflowScrolling style. The trick here is that this style is off, mobile Safari goes to ordinary scrolling and prevents over-bounce — alas, it is not able to cancel ongoing drag. This complex solution also tracks onscroll as bounce over the top makes scrollTop negative that may be tracked. This solution was tested on iOS 12.1.1 and has single drawback: while accelerating the scroll single over-bounce still happens as resetting the style may not cancel it immediately.
function preventScrollVerticalBounceEffect(container) {
setTouchScroll(true) //!: enable before the first scroll attempt
container.addEventListener("touchstart", onTouchStart)
container.addEventListener("touchmove", onTouch, { passive: false })
container.addEventListener("touchend", onTouchEnd)
container.addEventListener("scroll", onScroll)
function isTouchScroll() {
return !!container.style.webkitOverflowScrolling
}
let prevScrollTop = 0, prevTouchY, opid = 0
function setTouchScroll(on) {
container.style.webkitOverflowScrolling = on ? "touch" : null
//Hint: auto-enabling after a small pause makes the start
// smoothly accelerated as required. After the pause the
// scroll position is settled, and there is no delta to
// make over-bounce by dragging the finger. But still,
// accelerated content makes short single over-bounce
// as acceleration may not be off instantly.
const xopid = ++opid
!on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)
if(!on && container.scrollTop < 16)
container.scrollTop = 0
prevScrollTop = container.scrollTop
}
function isBounceOverTop() {
const dY = container.scrollTop - prevScrollTop
return dY < 0 && container.scrollTop < 16
}
function isBounceOverBottom(touchY) {
const dY = touchY - prevTouchY
//Hint: trying to bounce over the bottom, the finger moves
// up the screen, thus Y becomes smaller. We prevent this.
return dY < 0 && container.scrollHeight - 16 <=
container.scrollTop + container.offsetHeight
}
function onTouchStart(e) {
prevTouchY = e.touches[0].pageY
}
function onTouch(e) {
const touchY = e.touches[0].pageY
if(isBounceOverBottom(touchY)) {
if(isTouchScroll())
setTouchScroll(false)
e.preventDefault()
}
prevTouchY = touchY
}
function onTouchEnd() {
prevTouchY = undefined
}
function onScroll() {
if(isTouchScroll() && isBounceOverTop()) {
setTouchScroll(false)
}
}
}
Consider the following architecture:
<body> <div id="root"></div> </body>
this css will work:
#root { position: fixed; height: 100%; overflow: auto; }
For those of you who don't want to get rid of the bouncing but just to know when it stops (for example to start some calculation of screen distances), you can do the following (container is the overflowing container element):
const isBouncing = this.container.scrollTop < 0 ||
this.container.scrollTop + this.container.offsetHeight >
this.container.scrollHeight
Disable safari bounce scrolling effect:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
position: fixed;
}
I had an issue with grabbing the html element in the background, when a menu with scroll was open and either at the top or at the bottom at the scroll height. I tried lots of things. Setting html position to fixed was the closest I got to lock the screen, but in the PWA it resulted in a white area at the bottom, that I couldn't fix.
Finally I've found a solution, that worked for me 🎉:
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
height: calc(100vh - 1px)
overflow: hidden;
background-color: 'Whatever color you need to hide the 1px at the bottom'
}
Because it only seems to be an issue on iOS, I have targeted the devices from iPhone X to 12 Pro Max:
body {
margin: 0;
overflow: hidden;
background-color: '#TIP: You can use the color picker from the inspector';
#media only screen and (min-width: 375px) and (max-height: 926px) and (-webkit-device-pixel-ratio: 3) {
height: calc(100vh - 1px);
}
}
This is preventing any kind of scroll, touch or grab in the html or body elements, and scroll is still working in the menu or where else specified. Cheers.
body {
touch-action:none;
}
Using JQuery
// Disable
$("body").css({ "touch-action": "none" })
// Enable
$("body").css({ "touch-action": "auto" })
css overscroll-behavior is now supported in iOS 16. If you are targeting > iOS 16 devices, to prevent elastic bounce effect, add the following CSS to the html root
html {
overscroll-behavior: none;
}
Please note, the solution provided only disables elastic bounce effect when content is larger than viewport.
If you also want to completely disable scrolling in main page on iOS devices, use
html body {
overflow: hidden;
}
Similar to angry kiwi I got it to work using height rather than position:
html,body {
height: 100%;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Solution tested, works on iOS 12.x
This is problem I was encountering :
<body> <!-- the whole body can be scroll vertically -->
<article>
<my_gallery> <!-- some picture gallery, can be scroll horizontally -->
</my_gallery>
</article>
</body>
While I scrolling my gallery, the body always scrolling itself (human swipe aren't really horizontal), that makes my gallery useless.
Here's what I did while my gallery start scrolling
var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari
And when my gallery end its scrolling...
var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}
Hope this helps~
I needed the dialog to maintain its position fixed even if the page scrolled, so i used the
extension at http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 but there's 2 problems with it:
it flickers in IE and Firefox on page scroll (in Safari/Chrome it's fine)
on closing and then reopening, it looses its stickyness and scrolls along with the page.
Here's the code i'm using for creating the dialog:
$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
.dialog({
autoOpen: true,
title: user_str,
height: 200,
stack: true,
sticky: true //uses ui dialog extension to keep it fixed
});
And here's the code i'm using for reopening it:
jQuery('#'+divpm_id).parent().css('display','block');
Suggestions/solutions?
Thanks
I tried some of the solutions posted here, but they don't work if the page has been scrolled prior to the dialog being opened. The problem is that it calculates the position without taking into account the scroll position, because the position is absolute during this calculation.
The solution I found was to set the dialog's parent's CSS to fixed PRIOR to opening the dialog.
$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');
This assumes that you have already initialized the dialog with autoOpen set to false.
Note, this does not work if the dialog is resizable. It must be initialized with resizing disabled in order for the position to remain fixed.
$('#my-dialog').dialog({ autoOpen: false, resizable: false });
Tested this thoroughly and have found no bugs so far.
I combined some suggested solutions to the following code.
Scrolling, moving and resizing works fine for me in Chrome, FF and IE9.
$(dlg).dialog({
create: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
},
resizeStop: function(event, ui) {
var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
(Math.floor(ui.position.top) - $(window).scrollTop())];
$(event.target).parent().css('position', 'fixed');
$(dlg).dialog('option','position',position);
}
});
Update:
If you want to make it default for all dialogs:
$.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
$(this.element).parent().css('position', 'fixed');
$(this.element).dialog("option",{
resizeStop: function(event,ui) {
var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
(Math.floor(ui.position.top) - $(window).scrollTop())];
$(event.target).parent().css('position', 'fixed');
// $(event.target).parent().dialog('option','position',position);
// removed parent() according to hai's comment (I didn't test it)
$(event.target).dialog('option','position',position);
return true;
}
});
this._oldinit();
};
I could not get Scott's answer to work with jQuery UI 1.9.1. My solution is to reposition the dialog in a callback from the open event. First set the css position to fixed. Then position the dialog where you want it:
$('selector').dialog({
autoOpen: false,
open: function(event, ui) {
$(event.target).dialog('widget')
.css({ position: 'fixed' })
.position({ my: 'center', at: 'center', of: window });
},
resizable: false
});
Note: As noted in another answer, resizing the dialog will set its position to absolute again, so I've disabled resizable.
Bsed on Langdons's comment above, I tried the following, which works fine with jQuery-UI 1.10.0 and resizable dialogs:
$('#metadata').dialog(
{
create: function (event) {
$(event.target).parent().css('position', 'fixed');
},
resizeStart: function (event) {
$(event.target).parent().css('position', 'fixed');
},
resizeStop: function (event) {
$(event.target).parent().css('position', 'fixed');
}
});
try:
$(document).ready(function() {
$('#myDialog').dialog({dialogClass: "flora"});
$('.flora.ui-dialog').css({position:"fixed"});
)};
(from http://dev.jqueryui.com/ticket/2848)
Force your dialog box's position to be position:fixed using CSS
$('.selector').dialog({ dialogClass: 'myPosition' });
and define the myPosition css class as:
.myPosition {
position: fixed;
}
$("#myDilog").dialog({
create:function(){
$(this).parent().css({position:"fixed"});
}
});
I found that these answers didn't work for me but combining some of them did.
I used the create function to set the dialog as fixed so it didn't scroll the window down when the dialog was created.
create: function (event) {
$(event.target).parent().css('position', 'fixed')
}
Also I used the open function to make sure the dialog didn't disappear off the screen by changing the top value.
open: function(event, ui) {
$(event.target).parent().css('top', '30%')
}
This worked with autoOpen and resizable.
$('#myDialog').dialog({ dialogClass: "flora" });
$('.flora.ui-dialog').css({ top: "8px" });
this will keep the dialog on top position no matter were we have clicked.
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});
Why use $(document).ready ? This might be a recent development, but it works fine now.
$( ".ui-dialog" ).css("position","fixed");
$( ".ui-dialog" ).css("top","10px");
put this code on open function of dialog
First, create your dialog. Something like this:
$("#dialog_id").dialog({
autoOpen : false,
modal : true,
width: "auto",
resizable: false,
show: 'fade',
hide: { effect:"drop",duration:400,direction:"up" },
position: top,
height: 'auto',
title: "My awesome dialog",
resizeStart: function(event, ui) {
positionDialog();
},
resizeStop: function(event, ui) {
positionDialog();
}
});
$("#dialog_id").dialog('open');
Then make it auto center with this:
function positionDialog (){
setInterval(function(){
if($("#dialog_id").dialog( "isOpen" )){
$("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" ));
}
},500);
}
//setInterval is for make it change position "smoothly"
//You can take it off and leave just the if clausule and its content inside the function positionDialog.
The solution is actually really simple. I don't know if this applied when the question was asked but it does now anyway.
//First a container/parent-div with fixed position is needed
var dialogContainer=document.body.appendChild(document.createElement("div"));
dialogContainer.style.position="fixed";
dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window
//Now whenever a dialog is to be created do it something like this:
$(myDialogContent).dialog({
appendTo: dialogContainer,
position: {
at: 'center center',
of: dialogContainer
}
});
About "appendTo": http://api.jqueryui.com/dialog/#option-appendTo
About "position": http://api.jqueryui.com/position/
While similar to some of the other answers above, I've found that I had to do more than just position: fix the dialog, but I also had to position: static it's content to keep it attached to the dialog.
$('<div id="myDialog" class="myClass">myContent</div>')
.dialog(dialogOptions)
.parent()
.css({ position: 'fixed' })
.end()
.position({ my: 'center', at: 'center', of: window })
.css({ position: 'static' });
After this, I could call .dialog('open') any time I wanted and it would simply appear where I left it. I actually have this in a function that will return the existing dialog or create a new one as needed and then I just change the values of the dialog before .dialog('open') gets called.
As i wrote in my blog https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/
I've found a bug in “window” element or “dialog” element.
When you instantiate this widget, it go out of the main window browser, in particular in top and left position (when you drag o resize it).
To resolve this problem i’ve implemented this solution.
You can read the source code below:
$(dialog).window({
onMove: function(left, top) {
if (left < 0 || top < 0) {
left = (left < 0) ? 0 : left;
top = (top < 0) ? 0 : top;
$(this).window('move', {left: left, top: top});
}
},
onResize: function(width, height) {
var opt = $(this).window("options");
var top = opt.top;
var left = opt.left;
if (top < 0) {
top = (top < 0) ? 0 : top;
$(this).window('move', {left: left, top: top});
}
}
}).window("open");
The same code is for dialog:
$(dialog).dialog({
onMove: function(left, top) {
if (left < 0 || top < 0) {
left = (left < 0) ? 0 : left;
top = (top < 0) ? 0 : top;
$(this).dialog('move', {left: left, top: top});
}
},
onResize: function(width, height) {
var opt = $(this).window("options");
var top = opt.top;
var left = opt.left;
if (top < 0) {
top = (top < 0) ? 0 : top;
$(this).dialog('move', {left: left, top: top});
}
}
}).dialog("open");
Futhermore, when you call “$(this).window(“options”);” inside “onResize” method, and start your App,
you don’t see the window; so i must insert the “.window(“open”);” at the and of declaration of dialog.
I hope to help you.