Response title
This is preview!
Jquery Ui resizable events
in Using jQuery UI
•
11 years ago
I'm trying to make a resizable box so as when you resize it diplays a value in a span below it,the initial value is 10 and for every pixel added during re sizing the value increases by 0.01 and for every pixel removed during re sizing the value decreases by 0.01.Here's what i've written so far,the css for both the cbox which is the bigger box and the box which is the box to be resized.
The javascript basically showing the box on document ready, the box could be resized to a max and min height and width then on start it displays the value in the span valueCount, i made an initalnum 10 then a for loop stating its starting,ending and increment, i wouldn't even pretend that i know what to do next because i don't and that why im stuck, any help would be gladly appreciated.
<style type="text/css">
#cbox {
width:800px;
height: 600px;
border:1px solid #000;
}
#box{
position:absolute;
top:40%;
left:25%;
width: 100px;
height: 100;
border:1px solid #000;
}
</style>
initialNum = 10;
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').fadeIn('slow',function(){
$('#box').resizable({containment:'parent', handles:'all', minHeight:100,maxHeight:300,minWidth:100,maxWidth:300, start:function(){
$('valueCount').text = initialNum;
for(i=10;i<30;i+0.01)
{
$('box' + i).//got stuck here
});
});
});
</script>
the html
<div id="cbox" class="cbox" name="cbox">
<div id="box" class="box" name="box" style="display:none;" ></div>
</div>
<span id="valueCount">10</span>
1