2

I am creating a program to allow a user to change most CSS properties of a div. I need it to be centred though, the way I usually do this is with the CSS code below.

div {
  position: fixed;
  background: black;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  right: calc(50% - 50px);
}

I need to make the width and height their own variables however and then do a calculation for the top and right properties which will divide them by 2 and take away from 50%.

var width = 100;
var height = 100;
var top = (height / 2);
var right = (width / 2);

$('div')
  .css('position','fixed')
  .css('background','black')
  .css('width',width + 'px')
  .css('height',height + 'px')
  .css('top','calc(50% - ' + top + 'px)')
  .css('right','calc(50% - ' + right + 'px)');

How can I go about achieving a centred div while using variables as the values for CSS properties?

Alanay
  • 425
  • 2
  • 5
  • 9
  • You might see [CSS calc alternative using jquery](http://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery) – Daniel Corzo Jan 24 '17 at 19:05
  • It does not give me the same result as the pure CSS above. I am trying to centre something in the screen. – Alanay Jan 24 '17 at 19:09
  • I suggest to do the calculations and then apply the results to keep your code clear and maintainable... to get the 50% of the width you can try to use the width of your window or parent element if centered... – DIEGO CARRASCAL Jan 24 '17 at 19:10
  • use margin:0 auto – Hemant Jan 24 '17 at 19:10
  • I am half way there, I just need to change the "50px" in top and right properties to the variable names top and right instead. Look here http://codepen.io/Alanay/pen/zNdGJp – Alanay Jan 24 '17 at 19:15
  • It seems I cannot use variables called "top" or "right" – Alanay Jan 24 '17 at 19:25

2 Answers2

3

If you don't need to support crappy IE CSS variables are an option.

CSS

  1. Pick a scope in your stylesheet. The higher the selector is on the DOM, the more it'll cover. In the Snippet I chose the highest possible: :root (i.e. html).
  2. Declare CSS variable: :root --half: 50px CSSVar must be prefixed with 2 dashes. In the Snippet I have declared a --half on :root with the value of 50px.
  3. Next, assign CSSVar to the appropriate properties:
    • top: calc(50% - var(--half));
    • right: calc(50% - var(--half));

JavaScript

  1. Details are commented in Snippet.

SNIPPET

// Reference the input
var A = document.getElementById('input1');

// On input event on input#A call setHalf() function
A.addEventListener('input', setHalf, false);

/* setHalf() accesses the CSS by the CSSDeclaration 
|| interface.
*/
function setHalf(e) {
  // Reference the div
  var X = document.getElementById('shape1');

  /* Get div#shape1 computedStyle in order to 
  || access it's ruleset declarations.
  */
  var Y = window.getComputedStyle(X);

  // Get the value of the CSSVar --half
  var Z = Y.getPropertyValue('--half');

  // Set --half value to the value of input#A
  X.style.setProperty('--half', this.value + 'px');
}
:root {
  --half: 50px;
}
#shape1 {
  position: fixed;
  background: black;
  width: 100px;
  height: 100px;
  top: calc(50% - var(--half));
  right: calc(50% - var(--half));
  border: 1px solid black;
}
<div id='shape1'></div>
<input id='input1' type='number' min='-150' max='150' value='50'>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

So it turns out I am unable to use the words "top" or "right" as variable names.

Here is the code that ended up working.

var width = 100;
var height = 100;
var test1 = width / 2;
var test2 = height / 2;

$('div')
  .css('position','fixed')
  .css('background','black')
  .css('width',width + 'px')
  .css('height',height + 'px')
  .css({'top':'calc(50% - ' + test1 + 'px)'})
  .css({'right':'calc(50% - ' + test2 + 'px)'});
Alanay
  • 425
  • 2
  • 5
  • 9