hi,
this code work fine for image height and width change what i want is intead of two handle one for height and one for width i only want one handle and it changes the image height and widtt in equal propotion.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slider</title>
<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: 50, max: 500, step: 1, value: 1 })
.bind("slidechange", function () {
var o = $(this).slider('value');
var e = '#' + $(this).attr('data-wjs-element');
if ($(this).attr('id') == 'sliderWidth') {
$(e).css('width', o)
}
if ($(this).attr('id') == 'sliderHeight') {
$(e).css('height', o)
}
});
});
</script>
<style type="text/css">
#slider
{
width: 200px;
}
</style>
</head>
<body>
Width:
<div id="sliderWidth" data-wjs-element="box" class="slider">
</div>
Height:
<div id="sliderHeight" data-wjs-element="box" class="slider">
</div>
<br />
<img id="box" src="http://www.aspforums.net/Avatars/Shashikant.jpg?635862636668500000"
alt="Alternate Text" />
</body>
</html>
