CODEWITHSUNDEEP
javascriptjqueryjquery-uidialogopera
Conn Warwicker
Conn Warwicker

Reputation: 31

jquery dialog jumps when page scrolled (jquery-ui 1.10.3)

EDIT: Having just tested it in more browsers, it happens in Opera, IE 9 and Firefox as well. It seems to work fine in sites like jsbin, jsfiddle, etc... but if you just create a HTML file with that code and run it in the browser, then the problem happens.

Basically given the following code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 <br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

When the page is scrolled to the top, the dialog will work fine. But the further you scroll down the page, when you then try to move the dialog using the handle, it jumps down the page by about the same amount that you have scrolled.

Upvotes: 3

Views: 805

Answers (1)

Aaron
Aaron

Reputation: 21

The bug seems to have been introduced in jQuery ui 1.10.3. When I switched back to 1.10.2, the dialog acted normal.

A ticket was opened a few weeks ago: http://bugs.jqueryui.com/ticket/9315

Upvotes: 2

Related Questions