Position Dialog with x, y coordinates of parent container or view port.
Hi all,
I am new to JavaScript and JQuery UI. I am trying to figure how to set
a specific position for the dialog box. I would prefer to be able to
set it relative to the container "<div id="main">" that it is in; with
a position of 10px from the top and 10px from the left.
According to the JQuery UI website you are supposed to be able to do
it through an array "an array containing a coordinate pair (in pixel
offset from top left of view port)." Unfortunately, I am not sure how
to write the array. Could someone please help?
Here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Client-side Technologies</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="js/jquery-
ui-1.7.custom.min.js">
</script>
<link type="text/css" href="css/dot-luv/jquery-
ui-1.7.custom.css" rel="stylesheet"/>
<link type="text/css" rel="stylesheet" href="css/
research.css" />
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<script type="text/javascript">
$(document).ready(function(){
$('#switcher').themeswitcher();
});
</script>
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#child1").dialog({position: ['right','top']});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
<script type="text/javascript" src="http://
ui.jquery.com/themeroller/themeswitchertool/">
</script>
<div id="switcher">
</div>
</div>
<div id="center">
<div id="parent" class="ui-dialog ui-widget ui-widget-
content ui-corner-all undefined">
<div class="ui-dialog-titlebar ui-widget-header ui-
corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-
dialog-title">Client-Side Technologies</span>
</div>
<div style="min-height: 109px; width: auto;"
class="ui-dialog-content ui-widget-content" id="dialog">
<div id="child1" style=" min-height: 400px;
width: auto;" title="JQuery vs Google DWT" >
test.
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>