Javascript slider: How to set default opacity on page load
I am using a javascript "slider" function to set the opacity of an image.
Even though I specify "value: 0.5;" all this does is set the slider "bar"
position to 0.5 , it doesn't actually change the opacity to 0.5.
On page load, the default opacity is always 1.0. I can click on the slider
bar (which is in the 0.5 position), and it will apply the 0.5 value, but I
want to specify a default value when the page loads (and of course have
the slider set to match it).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css"
type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
orientation: "horizontal",
slide: function(e,ui){
$('#box').css('opacity', ui.value)
}
})
});
</script>
<style type="text/css">
#slider { width: 100px;}
#box {position:absolute; top:40px; left:0px; z-index:-1; opacity:0.5;}
</style>
</head>
<body>
<p><div id="slider"></div>
<div id="box">
<img src="image.gif">
</div>
</body>
</html>
No comments:
Post a Comment