I'm working on some native JavaScript (not my forte.. at all) and am not seeing the result of my function. I'm sure I've got a syntax error in here somewhere. Can you help me identify it? FYI- The function will dynamically center an object on the page.

this.style[left]= ((windowWidth - this.style[width])/2);
this.style[top]= ((windowHeight - this.style[height])/2);

I'm working on some native JavaScript (not my forte.. at all) and am not seeing the result of my function. I'm sure I've got a syntax error in here somewhere. Can you help me identify it? FYI- The function will dynamically center an object on the page.

this.style[left]= ((windowWidth - this.style[width])/2);
this.style[top]= ((windowHeight - this.style[height])/2);

• javascript
• css

• Are those variables in square brackets? They should be strings if using substring notation – Russ Cam Commented Jul 3, 2011 at 8:15
• @Russ Cam - errruhhhgg... Not sure what you mean. Other than yes, there are brackets, although left and top are properties.. – technopeasant Commented Jul 3, 2011 at 8:22

4 Answers 4

You have, at least, three problems.

First: The CSS height, width, left and top properties take lengths. You are passing them Numbers.

You must include a unit.

Likewise, you need to account for the unit on the values for the width and height.

Second: You also need to balance your parentheses.

Third: When using square bracket notation, you need to pass in strings. At the moment, I assume that left and top are undefined.

this.style.left = (windowWidth  - parseInt(this.style.width,10)) / 2  + 'px';
this.style.top  = (windowHeight - parseInt(this.style.height,10)) / 2 + 'px';

Finally, this will only work if the element has its width and height defined using inline style (or if those properties have been set via JavaScript). Otherwise the values you are trying to read will be undefined. In this case you will need to deal with the puted style.

Also remember that top and left will have no effect unless the element is positioned.

You omitted a (

this.style[left]= ((windowWidth - this.style[width])/2);

this.style[top]= ((windowHeight - this.stylep[height])/2);

You also missing an opening ( on this second line. Other than that, assuming that all the variables you are using there are defined your code seems fine.

this.style[left] = ((windowWidth - this.style[width]) / 2);
this.style[top] = ((windowHeight - this.style[height]) / 2);

Also this could be written like this:

this.style.left = ((windowWidth - this.style.width) / 2);
this.style.top = ((windowHeight - this.style.height) / 2);

When setting the styles, you should have a unit, e.g. 100px instead of just 100.

When reading the style, it will have a unit, so you would need to parse it using the parseInt function to get the number in front of the unit.

When accessing properties using brackets, you should use strings, not identifiers:

this.style["left"] = ((windowWidth - parseInt(this.style["width"],10)) / 2) + "px";
this.style["top"] = ((windowHeight - parseInt(this.style["height"],10)) / 2) + "px";

You can also use the . operator to access properties:

this.style.left = ((windowWidth - parseInt(this.style.width,10)) / 2) + "px";
this.style.top = ((windowHeight - parseInt(this.style.height,10)) / 2) + "px";