Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Add px value to jquery css command

Posted on 2013-06-24
3
Medium Priority
?
480 Views
Last Modified: 2013-06-24
Hi,

I am trying to add variables to the transform command in CSS with jquery but it doesnt work, any ideas?

My code is

 $x = $(this).attr("cx")+'px';
 $y = $(this).attr("cy")+'px';
      $(this).css('transform', "translate($x,$y) scale(2)"); });

$x and $y do get values.

Thanks
0
Comment
Question by:coolispaul
3 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39270901
You are putting '$' in front of your vars - this is JQuery not PHP

Try this

var x = $(this).attr("cx")+'px';
var y = $(this).attr("cy")+'px';
$(this).css('transform', "translate(x,y) scale(2)"); });
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39271291
jQuery doesn't replace variables in strings the same way that PHP does. You need to concatenate the translate argument properly:

$x = $(this).attr("cx")+'px';
$y = $(this).attr("cy")+'px';
$(this).css('transform', "translate(" + $x + "," + $y + ") scale(2)");

Open in new window

The $ before the variable name is OK, although not very common!
0
 

Author Comment

by:coolispaul
ID: 39271482
thanks yes that works..
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question