title: JQueryUI Dialog position not working,
body: <p>I am using JQueryUI Dialog and created this function below:</p>
  
  <pre><code>&lt;script&gt;
      $(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');
             });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and HTML code:</p>
  
  <pre><code>&lt;p class="class112" id="class1"&gt;click!&lt;/p&gt;
  
  &lt;div id="dialog" style="display: none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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 :</p>
  
  <pre><code>position:[2250,50]
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>