blargoner/selectmenu.html Secret

## selectmenu.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - IE8 page jump</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#speed" ).selectmenu();
  });
  </script>
  <style>
    fieldset {
      margin-top: 500px;
      margin-bottom: 500px;
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    select {
      width: 200px;
    }
    .overflow {
      height: 200px;
    }
  </style>
</head>
<body>

<div class="demo">
<p>Reproduction steps for page jump in IE8:</p>
<ol class="steps">
  <li>Resize your browser viewport vertically so that the select menu below is just visible.</li>
  <li>Scroll the viewport down so that this text is out of view.</li>
  <li>Open the select menu. Observe the page jump vertically back to the top.</li>
  <li>Bonus: select some text in this sentence and repeat steps 2 and 3, and observe the page jump back to this position.</li>
</ol>

<form action="#">

  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
  </fieldset>

</form>

</div>


</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Selectmenu - IE8 page jump</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
	<script>
	$(function() {
	$( "#speed" ).selectmenu();
	});
	</script>
	<style>
	fieldset {
	margin-top: 500px;
	margin-bottom: 500px;
	border: 0;
	}
	label {
	display: block;
	margin: 30px 0 0 0;
	}
	select {
	width: 200px;
	}
	.overflow {
	height: 200px;
	}
	</style>
	</head>
	<body>

	<div class="demo">
	<p>Reproduction steps for page jump in IE8:</p>
	<ol class="steps">
	<li>Resize your browser viewport vertically so that the select menu below is just visible.</li>
	<li>Scroll the viewport down so that this text is out of view.</li>
	<li>Open the select menu. Observe the page jump vertically back to the top.</li>
	<li>Bonus: select some text in this sentence and repeat steps 2 and 3, and observe the page jump back to this position.</li>
	</ol>

	<form action="#">

	<fieldset>
	<label for="speed">Select a speed</label>
	<select name="speed" id="speed">
	<option>Slower</option>
	<option>Slow</option>
	<option selected="selected">Medium</option>
	<option>Fast</option>
	<option>Faster</option>
	</select>
	</fieldset>

	</form>

	</div>


	</body>
	</html>