setting width calc with jquery

Question

can someone help me properly add calc width with jquery? Or maybe theres a better option for dynamic width in jquery than applying css3 calc width?

var calc = "calc(100% - 270px)";

$(".two").focus(function () {
    $('.one').animate({ width: "85px" });
    $(this).animate({ "width": calc + "px" });
});

http://jsfiddle.net/N6vaj/1/

Let me know if you need more description. Thanks~

You can't animate calc, only numerical regular css values can be animated. What exactly are you trying to do here ? — adeneo
– adeneo, Commented Mar 28, 2014 at 17:35
calc is a css property. You shouldn't do calc + "px" in your javascript, just leave it as width:calc. And I don't think it works with animate, either. — blgt
– blgt, Commented Mar 28, 2014 at 17:35
this is going to be a form on mobile so I want the width to be dynamic depending on container width / mobile device size. when a user clicks each input, all other inputs should get smaller to a point and the selected input should get bigger / fill up the remaining space — mike
– mike, Commented Mar 28, 2014 at 17:38

adeneo · Accepted Answer · 2014-03-28 17:38:20Z

1

In javascript calc(100% - 270px) would roughly equal getting the width of the parent element (100%) and subtracting 270

$(this).parent().width() - 270;

which leaves you with this

$(".two").focus(function () {
    var w = $(this).parent().width() - 270;

    $('.one').animate({ width: "85px" });
    $(this).animate({ "width": w });
});

FIDDLE

To make it work on all of them, you could do

var inputs = $(".one, .two, .three");

inputs.on('focus', function () {
    var w = $(this).parent().width() - 270;

    inputs.not(this).animate({ width: "85px" });
    $(this).animate({ "width": w });
});

FIDDLE

answered Mar 28, 2014 at 17:38

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mike Over a year ago

your right, 100% is technically talking about 100% of the parent element that makes so much sense. Thank you its exactly what I needed!!

Collectives™ on Stack Overflow

setting width calc with jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related