I am trying to position dialog on the right of the anchor tag, but with no luck.

I checked the solutions at jQuery UI dialog positioning and neither seems to work.

function openDialog(row_index) {
   var target = $('#note'+row_index);
    $("#dialog_content_"+row_index).dialog({ width:150 },
                                        { height:80 }).dialog('widget').position({
                                                                      my: 'left',
                                                                      at: 'right',
                                                                      of: target
                                                                     });
}

And this HTML

<a id="note10" onclick="openDialog('10')" style="cursor:pointer">0010</a>

<div style="display:none" title="Title 10" id="dialog_content_10">Row 10</div>

I am trying to position dialog on the right of the anchor tag, but with no luck.

I checked the solutions at jQuery UI dialog positioning and neither seems to work.

function openDialog(row_index) {
   var target = $('#note'+row_index);
    $("#dialog_content_"+row_index).dialog({ width:150 },
                                        { height:80 }).dialog('widget').position({
                                                                      my: 'left',
                                                                      at: 'right',
                                                                      of: target
                                                                     });
}

And this HTML

<a id="note10" onclick="openDialog('10')" style="cursor:pointer">0010</a>

<div style="display:none" title="Title 10" id="dialog_content_10">Row 10</div>

• javascript
• jquery
• html
• dialog

Share Improve this question Follow edited May 23, 2017 at 10:33 CommunityBot 111 silver badge asked Mar 3, 2011 at 8:09 Pentium10Pentium10 208k124124 gold badges435435 silver badges511511 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Adding the top designation to the my and at attributes seems to work - assuming you meant to align to the top and to the right of the anchor (tested in Chrome 11.0.6 and IE9):

function openDialog(row_index) {
   var target = $('#note'+row_index);
    $("#dialog_content_"+row_index).dialog({ width:150 },
                                        { height:80 }).dialog('widget').position({
                                                                      my: 'left top',
                                                                      at: 'right top',
                                                                      of: target
                                                                     });
}

Here is the jQuery page for testing the different positions.

EDIT:

Here is a fiddle showing it aligning on the right... maybe the issue is somewhere else in your CSS or html? As in the fiddle I've been testing using jQuery 1.5.1, jQuery UI 1.8.9 and the base theme CSS file.

OOpps - my brother was using my PC and I submitted the solution as him rather than myself

The lazy mans way

//get reference to the element
var target = $('#note'+row_index);

//add an empty span at the very end of the element [only once]
if($('#note'+row_index+'_getPosition').length==0){ 
  $(target).after('<span id="note'+row_index+'_getPosition"></span>')
  }

// get position of newly inserted span
var position = $('#note'+row_index+'_getPosition').position();

//finally call the dialog using position as below
position : [position.left,position.top]

The lazy mans way

//get reference to the element
var target = $('#note'+row_index);

//add an empty span at the very end of the element [only once]
if($('#note'+row_index+'_getPosition').length==0){ 
    $(target).after('<span id="note'+row_index+'_getPosition"></span>')
    }

// get position of newly inserted span
var position = $('#note'+row_index+'_getPosition').position();

//finally call the dialog using position as below
position : [position.left,position.top]