How can I keep a jQuery dialog on the screen?

Question

I don't want to have the dialog centered on the screen so I'm setting the top and left coordinates of the box. I'm positioning it so that it appears next to a link and won't initially be open until a click.

$("#error").dialog({
 bgiframe: true,
 autoOpen: false,
 width: 'auto',
 height: 'auto',
 hide: 'slide',
 show: 'clip'
});

and

<div id="error" title="Error">
<div id="errorText">&nbsp;</div>
</div>

From here I want to display an error message on the screen. For instance if I'm at the bottom of the page, I don't want the user to have to scroll down to see the dialog. Same thing if the error message is all the way on the right, I'd want to display it on the left side of the clicked element. The only problem with this since I have auto width and height it doesn't seem to know the height/width of the div before I show the dialog; with either $('#error').height() or $('#error').width().

$("#errorText").html(request.responseText + '<p>(Esc or click to close)</p>');
var x = el.position().left + el.outerWidth();
var y = el.position().top - $(document).scrollTop();
var position = el.position();
var bottomOfDialog = position.top + heightOfTheDialog;
if(bottomOfDialog > document.height)
{
     y -= heightOfTheDialog;
}
var rightSideOfDialog = position.left + widthOfTheDialog;
if(rightSideOfDialog > document.width)
{
    x -= (widthOfTheDialog + el.outerWidth());
}      
$("#error").dialog('option', 'position', [x, y]).dialog('open');

How do I get a proper heightOfTheDialog and widthOfTheDialog before the actual dialog is opened? Or should I be using something else?

Answer 1

If your goal is to show the user a message and keep them from having to scroll to discover it - which I believe is the case based on your description - you may want to consider using the jQuery BlockUI Plugin to tell the user the error message. Check out the following demos:

http://malsup.com/jquery/block/#demos

I think the growl functionality may be something you could work with.

The primary benefit here is that the error message would appear in a very consistent place and you would not need to be concerned with the exact location of the "offending" element, but could - at the same time - rest assured that the error message will always be visible to the user.