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?