CODEWITHSUNDEEP
javascriptjqueryhtmlcss
spacewindow
spacewindow

Reputation: 407

jquery .css() not applying -webkit-transform

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();
});

Upvotes: 3

Views: 414

Answers (2)

Guolin
Guolin

Reputation: 71

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/

Upvotes: 1

cracker
cracker

Reputation: 4906

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);

Upvotes: 0

Related Questions