I am stuck with a minor problem in aligning the dialog window to the center of the screen.
Position is set to center, but the problem is, the dailog window's left top corner is the one is aligned to the center of the screen... is there any way that i can overcome this.
// Dialog box properties for Select drive
$(".Drive").dialog({
title: 'Form Design'
, width: 'auto'
, height: 'auto'
, autoOpen: false
, position: 'center'
, closeOnEsc: true
, modal: true,
});
$('.driveChoose').click(function(){
var modalUrl = $(this).attr('title');
$('.Drive').load(modalUrl).dialog('open');
return false;
});
this works fine for me:
<script type="text/javascript" src="/js/jqueryui/jquery.ui.position.js"></script>
$(".Drive").dialog({
position: ['center', 'center']
});
Ancient question, but there are a couple of very common culprits for this.
The centering is done based on the content of the dialog when you open it. If you're adding the content after .open then that would explain top-level being in the center (because the div was emtpy originally).
You may be missing some files from jquery-ui, or you may have jquery.dimensions.js which should NOT be in there. More info here: Dialog box not positions center screen
Related
I've been working on this for literally days now. I have an application that's using jQuery UI for datepickers. Now, I also need some enhanced tooltips, so I was happy to see a tooltip widget added to jQueryUI.
I still need to support older versions of IE, so I can't use jQuery 2.0. I've upgraded to jQuery 1.9.1 and jQuery UI 1.10.3.
Anyway, the tooltip isn't behaving at all like I expect. I am creating the tooltips with this code:
$(document).ready(function() {
$('.tooltipStyle').tooltip({
position: { my: "top left", at: "bottom center" },
content: function() {
return "This tooltip is a function return value with <b>HTML content</b>";
}
});
});
Full demo at jsFiddle: http://jsfiddle.net/2agHC/4/. (Note that I've used the External Resources on the left to load the matching versions of jQuery and jQuery UI.)
First, I can't get the position property to work. I expect that the tooltip will appear starting just below the control to which it's attached, with its top left corner centered on the control. (I've made the gray so it's visible.) However, the tooltip appears up against the left edge of the window.
Secondly, I have to click on the div in order for the tooltip to display, while I'm expecting that it will appear with a hover.
I feel like I'm missing something bery fundamental about how the tooltip is supposed to be used, but like I said, I've been at this for days now. Can anyone explain what I'm missing?
Do you want it like this? jsfiddle
$(document).ready(function() {
$('.tooltipStyle').tooltip({
position: { my: "left top", at: "bottom" },
content: function() {
return "This tooltip is a function return value with <b>HTML content</b>";
}
});
});
If it's not your desired behaviour please respond.
Also reading the documentation on the jQuery UI Position utility might be helpful.
I guess the click you were speaking of was just there because the tooltip was hovering directly over the element.
Although in your example I didn't need to click...the tooltip pops up, immediately hides and then shows again.
To make it complete (like eclps' extract from docu)
my (default: "center")
Type: String
Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment.
[...]
Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned.
From the jQuery UI Position docs for 'my':
Defines which position on the element being positioned to align with
the target element: "horizontal vertical" alignment. [...] Acceptable
horizontal values: "left", "center", "right". Acceptable vertical
values: "top", "center", "bottom". Example: "left top" or "center
center".
You need to swap your position values. As shown in SirDerpington's answer.
position: { my: "left top" },
I am using jQuery mobile. In my web page, I have created a div with data-role as header. Inside this, there is an image.
Now, I have created another div with data-role popup. When the page loads, the div with role popup is hidden as expected.
When the user clicks on the image, the popup is expected to be displayed.
It does. Problem is that it displays in a manner that overlaps with the header and immediately below the image which triggered the popup.
I am calling the popup method on the image selector by passing it the following options
$("#navBar").popup("open", {
x: 0,
y: 50,
transition: "reverse slide"
});
This does not do the trick. Instead, the popup is displayed immediately below the image which triggered it. If X and Y options are removed, then the popup is displayed in the center of the window.
Some more information -
Here is the code that jquery mobile has prepared:
<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0">
Here it can be seen that jQuery Mobile has added the styling top=30px and left=15px.
To fulfill my needs, I want that top=40px and left=0px. I want to do this without overriding the base CSS. I was hoping that the X and Y options passed to the popup() method would do the trick but they are not working!
An Image of the issue to help in understanding.
popup by default tries to position directly on top of the element that opened it, in case you do it using API and specify x and y, it will try to center popup at given coordinates. But to avoid popup showing off screen jquery mobile also enforces a padding between popup dialog and the edge of the screen, and by default those padding margins are 30 vertical and 15 horizontal. So the reason your pup is positioned as it is is due to those tolerances.
To position popup to exact x and y you want, you will need to add half of popup's width to the desired x, and half of popup's height to desired y.
Here is code:
<script type="text/javascript">
$(function(){
var dialogOptions = {
title: "Header",
autoOpen: false,
modal: true,
width: 400,
height: 1000
};
$(".wnd").dialog(dialogOptions);
$("#btn").click(function(){ $(".wnd").dialog("open"); });
});
</script>
<style>
.wnd {background:yellow;height:900px;width:300px;}
</style>
<div class="wnd"></div>
<button id="btn">click me</button>
When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).
But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.
Here is demo on jsfiddle.
How to activate that side slider?
Thanks!
A clean solution would be like this one:
http://jsfiddle.net/4fc33/6/
What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.
An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.
At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.
Here's what worked:
$("#dialog").dialog({
modal: true,
width: "auto",
height: "auto"
/* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);
I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.
* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.
I have a long list of links which bring up different jQuery dialogs. When I scroll down to near the bottom of the page and click a link, it successfully opens my jQuery dialog but the dialog is not visible because the page has scrolled up to the top of the web page -- the dialog shows up below the fold and the user has to scroll back down to see the dialog.
What I want is for the dialog to popup and be visible no matter how far down the page the link is.
Here is my simple dialog jQuery code:
$(function () {
$('#dlg').dialog({
autoOpen: false,
height: 460,
width: 680,
modal: true,
position: 'center'
});
$('.vidlink').click(function(e) {
$('#dlg').dialog('open');
});
});
You can see how it happens on this page:
http://www.ourlaughingplace.com/asp/park.aspx?step=3&locID=WDW&parkID=MGM&DLRparkID=MGM#
Scroll down to "Movie Clips" and click on "Fantasmic Finale" using IE9, if you scroll back down you see that the dialog opened just the way it should -- it just came out below the fold.
I've tried setting the dialog position to 'center' and 'top' but still have same problem.
The value # for the href of the links correspond to the top of the document. With your current code, clicking on the link works as expected: the page is scrolled back to the top.
Either prevent default behavior of the <a> tags that opens the dialog:
$('.vidlink').click(function(e) {
e.preventDefault();
$('#dlg').dialog('open');
});
Or change the href value of those tags to:
I have been googlgling around and it seems I don't get any answer :/
I'd like to know how can I make sure that the dialog title will "stick" to the top of the document even if I've scrolled down in the main page?
I tried the option "position" top, bottom but with no luck.
Thanks for answering!
Finally I come up with the solution:
Using the "open" event to trigger the window.scrollBy(0,window.innerHeight - dialogHeight);
$("#open").click(function (){
$("#dialog").dialog({
open:function(){
window.scrollBy(0,window.innerHeight - 850);
},
modal:true,
width:850,
height:850
});
});
This will ensure the title of the dialog will be shown at first rather than the bottom part.