CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
ripper234
ripper234

Reputation: 230176

Can I make jquery dialog position independent of window size?

I'm using the position attribute to fix a dialog in a certain position.

$('#red').dialog({autoOpen: false, resizable: false, draggable: false, 
    height: 600, width:550, position: [10, 150]});

I find that if the browser window is too small, the dialog doesn't pop up at (10, 150), but higher.

Is there a way to make sure it pops up at an absolute position regardless of the window size?

Upvotes: 2

Views: 1920

Answers (3)

mu is too short
mu is too short

Reputation: 434785

Looks like the dialog widget is trying to keep the dialog visible and overriding your position setting in the process. You could use the open event to force the issue. The structure of the dialog (without irrelevant classes and such) is like this:

<div class="ui-dialog">
    <div class="ui-dialog-titlebar"></div>
    <div id="red"></div>
</div>

so you could use an open handler like this:

open: function(event, ui) {
    var $dialog  = $(event.target);
    var position = $dialog.dialog('option', 'position');
    $dialog.closest('.ui-dialog').css({
        left: position[0],
        top:  position[1]
    });
}

Yes, it is a bit kludgy but it works and I don't see anything in the API that allows you to control the dialog's behavior when the dialog doesn't fit in the viewable area.

Demo: http://jsfiddle.net/ambiguous/L9Deb/

Upvotes: 1

Ali Haider
Ali Haider

Reputation: 517

if you are using CSS, you can achieve this by:

#red{position: absolute; top: 150px; left: 10px;}

css positioning renders according to browser window.

In your code, you first need to get the offset through jquery using $(this).offset. Once you have the offset, then you can assign the offset+position in position: [10,150] part.

Its better to use CSS for this purpose. Just open the dialog using the plugin and the rest can be taken care through css.

Hope this helps.

-Veno

Upvotes: 0

Code Lღver
Code Lღver

Reputation: 15593

 $(window).height();
 $(window).width();

use the above properties of jquery.It will give you the windows size and you can adjust the position of your popup according to that.

And also read following link which will be also helpfull.

resolution of screen

windows height and width

Upvotes: 0

Related Questions