jQuery set custom dimensions for an element

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

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

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

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

your variable scope is off.

Answer 2

Your issue is those variables for the width and height are scoped. You need to define them outside the event handlers then set them in them without the var before them.

Answer 3

Declare your variables in the outer scope:

var frame = $('div#theFrame');
var custWidth = 40;  // declared outside and assigned a default value
var custHeight = 40; // declared outside and assigned a default value

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

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

$('#custSet').click( function() {
    //frame.height(custHeight); // Alternative to .css() if you like, also doesn't need 'px' as it always is in pixels.
    //frame.width(custWidth);  // Alternative to .css() if you like, also doesn't need 'px' as it always is in pixels.
    frame.css({height: custHeight, width: custWidth});
});

DEMO

Answer 4

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');
    });

Answer 5

Just make the tow variables global custWidth,custHeight

var frame = $('div#theFrame');
var custWidth,custHeight ;
$("#custWidth").keyup(function () {
      custWidth = $(this).attr('value');
}).keyup();

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

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