All geek questions in one place

Jquery Width / Height Calculator based on aspect ratio?

I have a requirement to have a small form with some text fields on them and a button at the end that with the specified aspect ratio (in a hidden text field) allows the user to enter a value in the width field, for example, and when the user changes the value, the text field will also be changed height.also when you enter the height field, the width will change. I don't want anyone to do this for me, but I would require some help setting up jquery functions to run when I change the text in the partiqular text box.

Any help, guidance would be fantastic. Many thanks

Chris

+3
source share
2 answers

Welcome to stackoverflow.

- :

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

.

0

, ... ... ?

<!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>
+1

Source: https://habr.com/ru/post/1729709/

More articles:


All Articles