how do i show a jqueryUI at a dynamic location

Question

I want to show a jquery dialog next to a button when its clicked.

i have:

<input type="button" name="test" value="i" 
onclick="$('<div></div>').html('test message').dialog(
{title: 'Test Dialog',modal: false, width: 200, height:140, resizable:false});" 
/>

i dont think I can make a function call within a json definition?

I can get the location of the mouse using jquery (from the event) and i am happy to use that as display position or the position of the button.

any suggestions welcome.

Answer 1

First, if possible do this outside your markup, it's much easier, so this:

<input type="button" name="test" value="i" 
onclick="$('<div></div>').html('test message').dialog(
{title: 'Test Dialog',modal: false, width: 200, height:140, resizable:false});" 
/>

Would be:

<input type="button" name="test" value="i" />

With this script:

$(function() {
  $("input[name='test']").click(function() {
    $('<div></div>').html('test message')
       .dialog({title: 'Test Dialog',
                modal: false, 
                width: 200, 
                height:140, 
                resizable:false});
  });
}); 

---

Then we can add positioning, say you want it to the right of the button, then use .offset() to get the button's position, then add it's .outerWidth() to make it appear on the right, like this:

$(function() {
  $("input[name='test']").click(function() {
    var pos = $(this).offset(),
        top = pos.top - $(document).scrollTop(); //minus amount scrolled down
    $('<div></div>').html('test message')
       .dialog({title: 'Test Dialog',
                modal: false, 
                width: 200, 
                height:140, 
                position: [pos.left + $(this).width(), top],
                resizable:false});
  });
}); 

You can try an example here, it has the exact markup and code that I have above, and here's a test version to ensure it works with scrolling.