jquery .css() not applying -webkit-transform

Question

I cannot see what is wrong with this code. Calculate center position of window then transform-translate div there (have to use translate for what i am doing).

Just getting this working for Chrome for a start, hence the -webkit- prefix).

Very confused as to why jQuery does not apply the inline style to the .logo div. Have included my other trouble-shooting experiments, commented out.

A syntax problem? jsfiddle here.

var centerPosition = '';

function centerLogo(){
  var w_width = $(window).width();
  var w_height = $(window).height();
  var hCenter = (w_width / 2) - 150;
  var vCenter = (w_height / 2) - 150;
    console.log(hCenter);
    console.log(vCenter);
  var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
    console.log(centerPosition);
  $('.logo').css('-webkit-transform', centerPosition);

  // Try uncommenting the three examples below - they all work ...

  // $('.logo').css('background', 'blue');

  // centerPosition = 'blue';
  // $('.logo').css('background', centerPosition);

  // $('.logo').css('-webkit-transform', 'translate(10.85px, 45.56px)');

}

jQuery(document).ready(function($){
  centerLogo();
});

jQuery's css method, on versions >= 1.8.0, will add vendor prefixes as necessary; no need for you to manually specify. — Palpatim
– Palpatim, Commented May 17, 2014 at 2:37
Remove the semi-colon in your declaration of centerPosition. jsfiddle.net/Palpatim/7f7rt/5 — Palpatim
– Palpatim, Commented May 17, 2014 at 2:44

Guolin · Accepted Answer · 2014-05-17 05:46:17Z

1

The correcy syntax of $('.logo').css('-webkit-transform', centerPosition); does not have semi colons inside the Strings. Try changing this:

var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';

to this:

var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px)';

Should work: http://jsfiddle.net/7f7rt/6/

edited May 17, 2014 at 5:46

answered May 17, 2014 at 2:54

Guolin

713 bronze badges

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

5 Comments

Krunal Patil Over a year ago

and how does this help?

Guolin Over a year ago

The correcy syntax of $('.logo').css('-webkit-transform', centerPosition); does not have semi colons inside the Strings.

Krunal Patil Over a year ago

are you sure, coz' its not working in the jsfiddle... please check it again.

Krunal Patil Over a year ago

rather the answer given below by Alpesh is working. There is no issues with the semi colons.

spacewindow Over a year ago

How did I miss that? Thanks for your help everyone. Good to know about the jQuery prefixing too.

cracker · Accepted Answer · 2014-05-17 05:38:41Z

0

This Will Sure Work.

    var posElem = document.getElementById('logo'); // set id to div 

    var newStyle = '-webkit-transform: translate(' + hCenter + 'px, ' + vCenter + 'px);' +
   'transform: translate(' + hCenter + 'px, ' + vCenter + 'px);';
   posElem.setAttribute('style',newStyle);

edited May 17, 2014 at 5:38

answered May 17, 2014 at 5:26

cracker

4,9043 gold badges26 silver badges41 bronze badges

1 Comment

cracker Over a year ago

Comment this line. $('.logo').css('-webkit-transform', centerPosition); and don't forget to change the id logo of your div.

Collectives™ on Stack Overflow

jquery .css() not applying -webkit-transform

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related