I wanted to move a div 136px to right with transform property so i wrote: `

$(".the_div").css({"transform":"translate(136px,0px)"});

and the_div class contains

.the_div
{
  transition-duration:2s;
}

and it worked but now i want to send a javascript variable instead of 136px. is that possible? how can i do that? a variable like

var my_width = window.innerwidth * 0.1;

i wrote

$(".the_div").css({"transform":"translate(my_width+'px',0px)"});

and it obviously didnt work. do you have an idea to move a div One-tenth of screen width to right (using transform property)?

I wanted to move a div 136px to right with transform property so i wrote: `

$(".the_div").css({"transform":"translate(136px,0px)"});

and the_div class contains

.the_div
{
  transition-duration:2s;
}

and it worked but now i want to send a javascript variable instead of 136px. is that possible? how can i do that? a variable like

var my_width = window.innerwidth * 0.1;

i wrote

$(".the_div").css({"transform":"translate(my_width+'px',0px)"});

and it obviously didnt work. do you have an idea to move a div One-tenth of screen width to right (using transform property)?

• javascript
• jquery
• css

Share Improve this question Follow edited Dec 9, 2015 at 22:15 eylay asked Dec 9, 2015 at 22:10 eylayeylay 2,21044 gold badges3434 silver badges6363 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can do this in pure Javascript as well using template strings. (PS - you don't even need JQuery)

First, save the div in a variable

const theDiv = document.querySelector('.the_div');

Second, save the value you want to translate in a variable

let number = 136;

Lastly, set the style attribute of the div

theDiv.style.transform = `tranlate(${number}px,0)`;

Hope this helps answer your question

Here is a helpful link for template strings https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals

simply you just need concatenate variable in string in javascript " + my_width + "

$(".the_div").css({"transform":"translate(" + my_width + "px,0px)"});