Applying CSS transform with jQuery using a variable

Question

I can get the below code working when I don't use the variable. When I add the variable it breaks though.

$('.right, .auto_slide').click(function() {
    var slider_margin = parseInt($(this).closest('.slider').css('transform',"translateX"));
    var new_margin = slider_margin - pane_width;
    $(this).closest('.slider').css('transform',"translateX("+new_margin"+)");
});

HTML

<section class="stage" id="basic">
    <div class="slider" style="transform: translateX(0px);">

        <!-- Content -->

    </div>
</section>

Anton · Accepted Answer · 2014-02-13 14:25:07Z

3

You need to add the variable like this

$('.thing').click(function() {
    var whatever = 20 - 100;
    $('.slider').css('transform',"translateX("+whatever+"px)");
    //                                       ^^like this^^ 
});

Also you cant subtract string like that, do 20-100

answered Feb 13, 2014 at 14:25

Anton

32.6k5 gold badges47 silver badges54 bronze badges

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

16 Comments

colmtuite Over a year ago

I can't get it working. I edited my question with my exact code.

Anton Over a year ago

@Moppy You have a typo "+new_margin"+)"the + sign must be outside the quotes like this "+new_margin +")"

colmtuite Over a year ago

Like this? (+"new_margin"+)

colmtuite Over a year ago

Ah, I added the "px" and it worked. Still bugs but I'll figure it out. Thanks

colmtuite Over a year ago

Thanks mate, I appreciate all the help :)

|

Tushar Gupta - curioustushar · Accepted Answer · 2014-02-13 14:25:45Z

1

You need to concatenation

$('.thing').click(function() {
    var whatever = 20 - 100;
    whatever += "px";
               //^ add px
    $('.slider').css('transform',"translateX("+whatever"+)");
                                            //^         ^  
});

and you can not subtract string you need numerbs

answered Feb 13, 2014 at 14:25

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

Applying CSS transform with jQuery using a variable

2 Answers 2

16 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related