CODEWITHSUNDEEP
jquery
kalabo
kalabo

Reputation: 564

Jquery Width / Height Calculator based on aspect ratio?

I have a requirement to have a small form with some text boxes on them and a button at the end which with a specified aspect ratio (in hidden textbox) enable the user to type in a value into the width box for example and when the user changes the value the height textbox will change also..also when you type in the height box the width will change. I do not want someone to do this for me, but i would require some help setting up the jquery functions to run when i change the text in a partiqular textbox.

Any help, guidance would be fantastic..many thanks

Chris

Upvotes: 3

Views: 2315

Answers (2)

kalabo
kalabo

Reputation: 564

This is wherei have got to now..very nearly there..but is there an easy way to round the numbers? 

<!DOCTYPE html>
<html>
<head>
  <script src="scripts/jquery-1.3.2.min.js"></script>
</head>
<body>

<input type='text' id='aspectratio' />
<input type='text' id='width' />
X
<input type='text' id='height' />
  <div></div>
<script>
$('#width').keyup(function(){
  var aspectratio = $('#aspectratio').val();
  var width = $(this).val();
  var height = aspectratio * width;
  $('#height').val(height);
});

$('#height').keyup(function(){
  var aspectratio = $('#aspectratio').val();
  var height = $(this).val();
  var width = aspectratio / height;
  $('#width').val(width);
});

</script>
</body>
</html>

Upvotes: 1

jay
jay

Reputation: 10325

Welcome to stackoverflow.

You can do something like this:

$('#widthBoxId').focusout(function(){
  var height = $(this).val() //math calculations based on $('#hiddenRatioId')
  $('#heightBoxId').val(height);
});

You can then do the reverse with the height box.

Upvotes: 0

Related Questions