Question

I am using JQueryUI Dialog and created this function below:

<script>
    $(document).ready(function() {
        $('#dialog').dialog({
                autoOpen:false,
                width:100,
                height:200,
                position:[2250,50]
           });


        $('.class112').click(function() {
           var msg = $(this).attr('id');
           $('#dialog').load('classSource/' + msg + '.html', function() {
           $('#dialog').dialog('open');
           });
        });
    });
</script>

and HTML code:

<p class="class112" id="class1">click!</p>

<div id="dialog" style="display: none;"></div>

It works fine but it creates dialog after calling ‘open’ function regardless of positioning. Lets say my computer’s screen has x:1280 and y:760 pixels and body width and height are set to 3000px each in CSS file. Whenever ‘open’ function for dialog is fired, it doesn’t get X position from when it was initialized before, remember :

position:[2250,50]

As a result it creates dialog at very right of the window not exactly at where X was declared to be. But Y comes out correctly because 50px is within the range of my screen resolution.

All I want is when I click ‘click!’ paragraph, I want the dialog box to appear in the initialized position and I might be able to see it after horizontal scroll.
What should I do?

Answer 1

I think the Dialog widget uses the Position utility to position itself. Looking at the documentation, you may be able to use the collision option to control this behavior:

When the positioned element overflows the window in some direction,
move it to an alternative position. Similar to my and at, this accepts
a single value or a pair for horizontal/vertical, eg. “flip”, “fit”,
“fit flip”, “fit none”.

http://jqueryui.com/demos/position/#option-collision

EDIT:

Yes, looking at the source of 1.8.16 the default option is “fit”:

    position: {
        my: 'center',
        at: 'center',
        collision: 'fit',
        // ensure that the titlebar is never outside the document
        using: function(pos) {
            var topOffset = $(this).css(pos).offset().top;
            if (topOffset < 0) {
                $(this).css('top', pos.top - topOffset);
            }
        }
    },

You will want to override that to “none” probably.