Revisions to jQuery UI setting absolute dialog position does nothing

added 5 characters in body

Source Link

edited Jun 6, 2017 at 3:30

24k
3
20
28

I think I got it to work .. by using

position: { my: "left top", at: "left"left+"+x+" bottom"top+"+y+"", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

I think I got it to work .. by using

position: { my: "left top", at: "left bottom", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

I think I got it to work .. by using

position: { my: "left top", at: "left+"+x+" top+"+y+"", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

added 5 characters in body

Source Link

edited Jun 6, 2017 at 3:25

Mohamed-Yousef

24k
3
20
28

I think I got it to work .. by using

position: { my: "left top", at: "left bottom", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+"+x+""left+" top+"+y+""+ x + " top+" + y + "", of: $(window) }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

I think I got it to work .. by using

position: { my: "left top", at: "left bottom", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+"+x+" top+"+y+"", of: $(window) }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

I think I got it to work .. by using

position: { my: "left top", at: "left bottom", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

deleted 4 characters in body

Source Link

edited Jun 6, 2017 at 3:13

Mohamed-Yousef

24k
3
20
28

I think I got it to work here.. by using

position: { my: "left top", at: "left bottom", of: window }

and fromby reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+"+x+" top+"+y+"", of: $(window) }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

I think I got it to work here by using

position: { my: "left top", at: "left bottom", of: window }

and from reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+"+x+" top+"+y+"", of: $(window) }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

I think I got it to work .. by using

position: { my: "left top", at: "left bottom", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+"+x+" top+"+y+"", of: $(window) }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

Source Link

created Jun 6, 2017 at 3:05

Mohamed-Yousef

24k
3
20
28

Loading

Collectives™ on Stack Overflow

Return to Answer