jQuery UI dialog positioning

JqueryJquery Ui

Jquery Problem Overview

I am trying to use the jQuery dialog UI library in order to position a dialog next to some text when it is hovered over. The jQuery dialog takes a position parameter which is measured from the top left corner of the current viewport (in other words, [0, 0] will always put it in the upper left hand corner of your browser window, regardless of where you are currently scrolled to). However, the only way I know to retrieve the location is of the element relative to the ENTIRE page.

The following is what I have currently. position.top is calculated to be something like 1200 or so, which puts the dialog well below the rest of the content on the page.

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

How can I find the correct position?

Thanks!

Jquery Solutions

Solution 1 - Jquery

As an alternative, you could use the jQuery UI Position utility e.g.

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

Solution 2 - Jquery

Thanks to some answers above, I experimented and ultimately found that all you need to do is edit the "position" attribute in the Modal Dialog's definition:

position:['middle',20],

JQuery had no problems with the "middle" text for the horizontal "X" value and my dialog popped up in the middle, 20px down from the top.

I heart JQuery.

Solution 3 - Jquery

After reading all replies, this finally worked for me:

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

Solution 4 - Jquery

Taking Jaymin's example a step further, I came up with this for positioning a jQuery ui-dialog element above the element you've just clicked (think "speech bubble"):

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

Note that I "open" the ui-dialog element before calculating the relative width and height offsets. This is because jQuery can't evaluate outerWidth() or outerHeight() without the ui-dialog element physically appearing in the page.

Just be sure to set 'modal' to false in your dialog options and you should be a-OK.

Solution 5 - Jquery

http://docs.jquery.com/UI/API/1.8/Dialog

Example for fixed dialog on the left top corner:

$("#dialogId").dialog({
	autoOpen: false,
	modal: false,
	draggable: false,
	height: "auto",
	width: "auto",
	resizable: false,
	position: [0,28],
	create: function (event) { $(event.target).parent().css('position', 'fixed');},
	open: function() {
		//$('#object').load...
	}
});

$("#dialogOpener").click(function() {
	$("#dialogId").dialog("open");
});

Solution 6 - Jquery

Check your <!DOCTYPE html>

I've noticed that if you miss out the <!DOCTYPE html> from the top of your HTML file, the dialog is shown centred within the document content not within the window, even if you specify position: { my: 'center', at: 'center', of: window}

EG: http://jsfiddle.net/npbx4561/ - Copy the content from the run window and remove the DocType. Save as HTML and run to see the problem.

Solution 7 - Jquery

Check out some of the jQuery plugins for other implementations of a dialog. Cluetip appears to be a feature-rich tooltip/dialog style plug-in. The 4th demo sounds similar to what you are trying to do (although I see that it doesn't have the precise positioning option that you're looking for.)

Solution 8 - Jquery

To put it right on top of control, you can use this code:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },
    
...
    });

Solution 9 - Jquery

$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

Positions a dialog just under an element. I used offset() function just because it calculates the position relative to upper left corner of the browser, but position() function calculates the position relative to parent div or iframe that parent of the element.

Solution 10 - Jquery

instead of doing pure jquery, i would do:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

if i am understanding your question correctly, the code you have is positioning the dialog as if the page had no scroll, but you want it to take the scroll into account. my code should do that.

Solution 11 - Jquery

$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });

Solution 12 - Jquery

This http://www.howtocreate.co.uk/tutorials/javascript/browserwindow">page</a> shows how to determine your scroll offset. jQuery may have similar functionality but I couldn't find it. Using the getScrollXY function shown on the page, you should be able to subtract the x and y coords from the .position() results.

Solution 13 - Jquery

a bit late but you can do this now by using $j(object).offset().left and .top accordingly.

Solution 14 - Jquery

I don't think the speech bubble is quite right. I tweaked it a bit so that it would work and the item opens right under the link.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

Solution 15 - Jquery

To fix center position, I use:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Solution 16 - Jquery

Here is the code..,how to position the jQuery UI dialog to center......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
		 modal: true,
         title: "About the calendar",
         width: 600,		 
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();
	  
	  $about.dialog("option", "position", 'center');
	  
   });

Solution 17 - Jquery

you can use $(this).offset(), position is related to the parent

Solution 18 - Jquery

I've tried all the proposed solutions but they won't work because the dialog is not part of the main document and will has its own layer (but thats my educated guess).

  1. Initialize the dialog with $("#dialog").dialog("option", "position", 'top')
  2. Open it with $(dialog).dialog("open");
  3. Then get the x and y of the displayed dialog (not any other node of the document!)

var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

$(dialog).dialog('option', 'position', [xcoord , ycoord]);

This way the coordinates are from the dialog not from the document and the position is altered according to the layer of the dialog.

Solution 19 - Jquery

I tried for many ways to get my dialog be centered on the page and saw that the code:

$("#dialog").dialog("option", "position", 'top')

never change the dialog position when this was created.

Instead of, I change the selector level to get the entire dialog.

$("#dialog").parent() <-- This is the parent object that the dialog() function create on the DOM, this is because the selector $("#dialog") does not apply the attributes, top, left.

To center my dialog, I use the jQuery-Client-Centering-Plugin

$("#dialog").parent().centerInClient();

Solution 20 - Jquery

above solutions are very true...but the UI dialog does not retain the position after window is resized. below code does this

			$(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });
                           
                        })
           
            })
           
            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                
			$(".abc").dialog({
                                position:[posX,posY]
                            });
            })

Solution 21 - Jquery

You ca set top position in style for display on center, saw that the code:

.ui-dialog{top: 100px !important;}

This style should show dialog box 100px bellow from top.

Categories
Recommended Jquery Solutions
Recommended Jquery Ui Solutions

Previous Solution:

What is the difference between SessionState and ViewState?

asp.netSession StateViewstate

Next Solution:

Is using a lot of static methods a bad thing?

Language AgnosticStatic Methods

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionWickethewokView Question on Stackoverflow
Solution 1 - JqueryBrian M. HuntView Answer on Stackoverflow
Solution 2 - Jqueryuser1288395View Answer on Stackoverflow
Solution 3 - JqueryJaymin PatelView Answer on Stackoverflow
Solution 4 - JquerymarkedupView Answer on Stackoverflow
Solution 5 - JqueryxhochnView Answer on Stackoverflow
Solution 6 - JqueryDaniel FlippanceView Answer on Stackoverflow
Solution 7 - JqueryBen KoehlerView Answer on Stackoverflow
Solution 8 - Jquerylive-loveView Answer on Stackoverflow
Solution 9 - JqueryM. BelenView Answer on Stackoverflow
Solution 10 - JquerySamuelView Answer on Stackoverflow
Solution 11 - JqueryGünes ErdemiView Answer on Stackoverflow
Solution 12 - JqueryPhilip TinneyView Answer on Stackoverflow
Solution 13 - Jqueryuser363690View Answer on Stackoverflow
Solution 14 - JquerycliffView Answer on Stackoverflow
Solution 15 - JqueryEduardo CuomoView Answer on Stackoverflow
Solution 16 - JqueryManu R SView Answer on Stackoverflow
Solution 17 - Jqueryneil tangView Answer on Stackoverflow
Solution 18 - JqueryMr.MountainView Answer on Stackoverflow
Solution 19 - JqueryjmozkoView Answer on Stackoverflow
Solution 20 - JqueryKaustubh - KAYView Answer on Stackoverflow
Solution 21 - Jquerysanjay jangidView Answer on Stackoverflow