up vote 0 down vote favorite 

<script type="text/javascript">
function calculate() {
    var myBox1 = document.getElementById('box1').value;
    var myBox2 = document.getElementById('box2').value;
    if (showAlert(myBox1, 'Width') && showAlert(myBox2, 'Height')) {
        var result = document.getElementById('result');
        var myResult = [(myBox1 * myBox2 * 0.69)/100];
        result.value = parseFloat(myResult).toFixed(2);
    }
}
</script>
.cropper-face,
.cropper-line,
.cropper-point {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  filter: alpha(opacity=10);
  opacity: .1;
}
<input id="box1" type="text" onchange="calculate()"/>
<input id="box2" type="text" onchange="calculate()"/>
<input id="result" type="text" readonly="readonly" onchange="calculate()"/>

I want to change width and height property dynamically using html input field.

Can anyone tell me how can this possible by using this input as css property width and height in this code

I have two text-box for width & height. and it should be change width and height of this css when I enter values in this field.

As there are 3 classes which has same property. How can I change its width and height according to user input .

Thanks in advance.

share|improve this question
  • 1
    You can do it with Javascript – joyBlanks Dec 1 '15 at 11:20
  • Why don't you add your own class instead? You could override stylesheet rule in javascript but usually you'd have better to just add new class to these elements with its own rule overriding previous ones. Of course, you could just set inline style in js too – A. Wolff Dec 1 '15 at 11:21
  • @A.Wolff I want to set this as per user input. can you please explain in brief or provide some code example. – user5217897 Dec 1 '15 at 11:23
  • If you provide MCVE it would be simpler for anyone to help. But basically in jQuery to set inline style: $('#inputWidth').on('input', function(){ $('.cropper-face, .cropper-line, .cropper-point').css('width', this.value);}); – A. Wolff Dec 1 '15 at 11:25
  • Possible duplicate of How do I change the CSS property "display" in javascript – Ich Dec 1 '15 at 11:34
up vote 1 down vote

To change the element dimensions dynamically when input value changes, you'll have to do the following:

var widthInput = $('#width');
var heightInput = $('#height');
var targetElement = $('#target');

set the values as the element dimensions

var onInputChange = function(){
    //getting the values from the width and height inputs
    var width = widthInput.val() || 0;
    var height = heightInput.val() || 0;
    //setting the values we got as the width and height
    //for the element
    targetElement.css({
        width: width + 'px',
        height: height + 'px'
    });
};

listen to keyup events on the inputs like so

//listening for keyup events for both width and height inputs
//NOTE: I used 'keyup' event and not 'change' like your example
widthInput.keyup(onInputChange);
heightInput.keyup(onInputChange);

Here is a working example using jQuery: http://jsfiddle.net/6cjsLdcj/1/

share|improve this answer
  • How can I set this in above css ? As you have use inline css .. – user5217897 Dec 1 '15 at 11:48
  • You can't do that using CSS, It requires Javascript. & inline css. You can create new 'stylesheet' dynamicly also using javascript, but its very complicated and not well supported in all browser, so it's not the best solution for you problem. – Adi Darachi Dec 1 '15 at 11:50
  • okay .. can we pass this value to above css or replace this css values. because this css is used for canvas. lifestylewallart.com.au/imageeditor/indexr.php?pId=649 you can see here a box on image. I want to change this box width and height using user input field on right side. – user5217897 Dec 1 '15 at 11:52
  • what element it suppose to change? the image ? the cropper ? – Adi Darachi Dec 1 '15 at 11:59
  • cropper .. box on cropper – user5217897 Dec 1 '15 at 12:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.