When a slider is placed in a div with the initial display property set
to none, the slider becomes inactive when the div becomes visible.
A test case can be found here: http://pastie.caboo.se/42529
This codes seems to work on FF and IE but is failing in Safari.
Mike
Here is the HTML for the test case. To test, you may have to change the include directories for the javascript files.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slider Test Case</title>
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="test" style="display:none;">
<div id="track" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle" style="width:5px;height:10px;background-color:#f00;cursor:move;"> </div>
</div>
</div>
<div>
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1" style="width:5px;height:10px;background-color:#f00;cursor:move;"> </div>
</div>
</div>
<a href="#" onclick="$('test').toggle(); return false;">toggle</a> <span id="drag1"></span>
<script type="text/javascript" language="javascript">
var slider = new Control.Slider('handle','track',
{
range:$R(1,8),
values:[1,2,3,4,5,6,7,8],
disabled: false,
onSlide: changeImages, onChange: changeImages
});
var slider1 = new Control.Slider('handle1','track1',
{
range:$R(1,8),
values:[1,2,3,4,5,6,7,8],
disabled: false,
onSlide: changeImages, onChange: changeImages
});
function changeImages(v)
{
$('drag1').innerHTML = v;
}
</script>
</body>
</html>