ansaurus

Question

Jquery Width / Height Calculator based on aspect ratio?

Answer 1

A:

Hi Chris. 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.

jeerose 2010-01-23 18:22:51

fantastic..i will try that very soon..ill let you know how i get on.. :)...can i just confirm..the $(this).val()..is this a function? do i need to change this to perform the action or can i extract this into a function.. ?

2010-01-23 18:27:38

Please do, and remember to select the correct answer (even if it's not mine!). Keeping your accept rate high will encourage others to help you next time.

jeerose 2010-01-23 18:29:47

$(this).val() refers to the current value of $('#widthBoxId') since you're inside a event handler ( .focusout() ) for that element.

jeerose 2010-01-23 18:31:06

Answer 2

A:

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>

2010-01-23 18:49:41

Chris, you should update your original post by indicating that it's an update rather than posting an answer... but you can round down by using Math.floor(number) where number is the number you want to round.

jeerose 2010-01-23 18:55:07

thanks for the info...im loving this site though...very useful :)

2010-01-23 19:01:36

It's a fantastic resource. Be sure to have a look at the FAQs: http://stackoverflow.com/faq

jeerose 2010-01-23 19:03:00

ansaurus

tags:

views:

answers:

Jquery Width / Height Calculator based on aspect ratio?

related questions