I am using jQuery UI's slider widget, and if the prototype js library is also included on the page, I find the following incorrect behavior in IE8 (other browsers are fine):
While hovering over the handle, pressing and holding the mouse button causes the handle to immediately jump to the bottom of the slider. Attempting to drag does not move the handle.
However, if I click a point on the slider other than the current position of the handle, the handle jumps to that point, and I can then drag the handle freely (as it should.)
Eliminating prototype from the page resolves this behavior.
Code below -- I am using jQuery's noconflict so in principle Prototype and jQuery should play nice together...but clearly something's going awry here.
Any ideas about how to work around this? Thanks so much!
<!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" xml:lang="en" lang="en">
<head>
<!-- eliminating the following line resolves the bug -->
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function () {
var setupVolumeSlider = function () {
$j("#volume-slider").slider({
orientation: "vertical",
min: 0,
max: 100
});
};
setupVolumeSlider();
});
</script>
<style type="text/css">
body { padding: 100px; }
div#volume-slider { height: 100px;}
</style>
</head>
<body>
<div id="volume-slider"></div>
</body>
</html>