Question

I have a div which I would like to set custom dimensions using two text inputs.

<div id="theFrame"></div>
    width: <input id="custWidth" type="text">
    height: <input id="custHeight" type="text">
<br>
<button id="custSet">Set my width!</button>

I have tried setting the height and width with variables, but I am at a loss as to how to do it now.

var frame = $('div#theFrame');

$("#custWidth")
    .keyup(function () {
        var custWidth = $(this).attr('value');
    })
    .keyup();

$("#custHeight")
    .keyup(function () {
        var custHeight = $(this).attr('value');
    })
    .keyup();

$('#custSet')
    .click( function() {
        frame.css({height: custHeight, width: custWidth});
    });

Thanks.

http://jsfiddle.net/Kyle_Sevenoaks/6MUuv/

Answer 1

You most probably need to include ‘px’ when setting your CSS:

frame.css({height: custHeight + 'px', width: custWidth + 'px'});

Also, you need to define your custHeight and custWidth parameters globally, since they are local only in the key up function.

var frame = $('div#theFrame'), custWidth = 0, custHeight = 0;

$("#custWidth")
    .keyup(function () {
        window.custWidth = $(this).attr('value');
    })
    .keyup();

And… I believe you don’t need the second keyup() call there:

$("#custWidth")
    .keyup(function () {
        window.custWidth = $(this).attr('value');
    });