Breaking out of string in javaScript css declaration?

Question

Sorry for the weak title.

I have some jQuery that is going pretty well, however, I guess I don't know some of the basics. I want to write -wt/2px as the left margin but I don't understand how it's breaking out between string and number - any help?

Here is what we came up with after the answer / (we were over-riding our own css was just one of the problems CODEPEN

jQuery

$(document).ready(function(){

  var innerH = $('.v-align'),
    ht = innerH.height();

  var innerW = $('.h-align'),
    wt = innerW.width();

  innerH.css({
    'position':'absolute',
    'top':'50%',
    'margin':-ht/2+'px 0 0 0'
  });

  innerW.css({
    'position':'absolute',
    'left':'50%',
    // ?
    'margin': '0 0 0 '+(-wt/2)+'px'
  });

});

dandavis · Accepted Answer · 2013-06-12 20:32:12Z

1

use parens when in doubt:

 innerH.css({
    'position':'absolute',
    'top':'50%',
    'margin': (-ht/2)+'px 0 0 0'
  });

  innerW.css({
    'position':'absolute',
    'left':'50%',
   'margin': '0 0 0 '+(-wt/2)+'px'
  });

edited Jun 12, 2013 at 20:32

answered Jun 12, 2013 at 20:20

dandavis

16.8k5 gold badges43 silver badges38 bronze badges

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

6 Comments

nouveau Over a year ago

I'm not having problems with margin-top, I'm having problems understanding how to write margin-left. See the /* ? */

nouveau Over a year ago

I want to write something like: 'margin': '0 0 0 (-wt/2)px'

nouveau Over a year ago

Well, I think you answered my question. As usual, I ended up with more questions. How do the +'s work? The centering based on container width is working, but the offset margin for the top is not. Gonna mark this answered, but if you want to look at that fiddle that would be cool. Thanks. dw c/o nouveau

nouveau Over a year ago

Actually, ignore that fiddle... this whole things has gone wrong. Your answer was correct though. I am just going about this all wrong. Thanks again. dw c/o nouveau

dandavis Over a year ago

@nouveau: the "+" concats strings as well as performs addition. when you have mixed strings and numbers, it can be ambiguous which operation should be performed, but parens make it explicit.

|

Collectives™ on Stack Overflow

Breaking out of string in javaScript css declaration?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related