CODEWITHSUNDEEP
javascriptjqueryhtmldimensions
Kyle
Kyle

Reputation: 67184

jQuery set custom dimensions for an element

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/

Upvotes: 2

Views: 171

Answers (5)

Nope
Nope

Reputation: 22329

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

Upvotes: 3

Dipu Raj
Dipu Raj

Reputation: 1884

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

Upvotes: 1

ncremins
ncremins

Reputation: 9200

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.

Upvotes: 5

FluffyJack
FluffyJack

Reputation: 1732

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.

Upvotes: 3

Zathrus Writer
Zathrus Writer

Reputation: 4331

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

Upvotes: 2

Related Questions