I'm a JavaScript novice. Have patience with me.

I searched this site for relevant questions and found two: How to get width of a dynamically created element with $iple in Angularj and jQuery + CSS. How do I pute height and width of innerHTML?. Their relevance and their answers are discussed below. If I missed a relevant question and this is a duplicate question, please direct me to it.

I dynamically create a <div class="popup"> (call it "popup"), populate it with innerHTML from a display: none; <div> in the markup, and insert it on the page. The relevant CSS is:

.popup {
   top: 0;
   left: 0;
   width: 200px;
   height: 250px;
 }  

Using event.clientX, I position popup relative to the cursor position at the time the mouseover event fired, as follows:

var widthOffset = 75, heightOffset = 0;
var windowWidth, popupWidth;
// other code ...
windowWidth = $(window).width();
popupWidth = 200;   // popup.style.width returns nothing (not null,
                    // not undefined, just nothing).
// when event.clientX is in the left half of the window, display popup
// offset to the right of clientX;
// when clientX is in the right half, display popup offset to the left.
if( event.clientX > windowWidth/2 ){ widthOffset = -(widthOffset + popupWidth);}
popup.style.top = event.clientY - heightOffset + "px";
popup.style.left = event.clientX + widthOffset + "px";

There is a working reduced case at the Pen Popup Project Reduced Case on CodePen.

The problem is that I want to programmatically obtain popupWidth not set it as a fixed quantity. But, as the ment states,

popupWidth = popup.style.width;  

is nothing. (Maybe it's a null string: popupWidth === "". I'm uncertain.)

The answer to the first question referenced above said to insert popup into the DOM before trying to obtain its width. I have done this. (See the Pen.) Still, it doesn't work.

A ment to the second answer to the second question said:

the root issues is that height cannot be set on an element with display:none.

I had display: none but when I changed it to display: block, and set popupWidth = popup.style.width;, popup "stuttered" fiercely on mouseover.

So the question remains: How do I programmatically get popupWidth just as I did with windowWidth?

I'm a JavaScript novice. Have patience with me.

I searched this site for relevant questions and found two: How to get width of a dynamically created element with $iple in Angularj and jQuery + CSS. How do I pute height and width of innerHTML?. Their relevance and their answers are discussed below. If I missed a relevant question and this is a duplicate question, please direct me to it.

I dynamically create a <div class="popup"> (call it "popup"), populate it with innerHTML from a display: none; <div> in the markup, and insert it on the page. The relevant CSS is:

.popup {
   top: 0;
   left: 0;
   width: 200px;
   height: 250px;
 }  

Using event.clientX, I position popup relative to the cursor position at the time the mouseover event fired, as follows:

var widthOffset = 75, heightOffset = 0;
var windowWidth, popupWidth;
// other code ...
windowWidth = $(window).width();
popupWidth = 200;   // popup.style.width returns nothing (not null,
                    // not undefined, just nothing).
// when event.clientX is in the left half of the window, display popup
// offset to the right of clientX;
// when clientX is in the right half, display popup offset to the left.
if( event.clientX > windowWidth/2 ){ widthOffset = -(widthOffset + popupWidth);}
popup.style.top = event.clientY - heightOffset + "px";
popup.style.left = event.clientX + widthOffset + "px";

There is a working reduced case at the Pen Popup Project Reduced Case on CodePen.

The problem is that I want to programmatically obtain popupWidth not set it as a fixed quantity. But, as the ment states,

popupWidth = popup.style.width;  

is nothing. (Maybe it's a null string: popupWidth === "". I'm uncertain.)

The answer to the first question referenced above said to insert popup into the DOM before trying to obtain its width. I have done this. (See the Pen.) Still, it doesn't work.

A ment to the second answer to the second question said:

the root issues is that height cannot be set on an element with display:none.

I had display: none but when I changed it to display: block, and set popupWidth = popup.style.width;, popup "stuttered" fiercely on mouseover.

So the question remains: How do I programmatically get popupWidth just as I did with windowWidth?

• javascript
• css
• dynamic

• 1 Is there any particular reason you're not using jQuery functions, which you seem to have included in your code pen? – Jhecht Commented May 7, 2016 at 6:06
• Well, yes. I don't know JQuery. Researching the question "how to obtain window width" led me to the answer, the JQuery function $(window).width(). Through more research, I learned how to include JQuery in the .js file. That's the full extent of my JQuery knowledge. Could you provide a specific answer? – alxfyv Commented May 7, 2016 at 7:06

2 Answers 2

With help from @Redu and @torazaburo, the answer became clear.

popupWidth = popup.offsetWidth; is the correct statement but both these conditions must be true:

1. popup must have been inserted into the DOM, and
2. display: block; must have been set.

If popup is still in memory or display: block; has not been set, then popup.offsetWidth === 0. If both of the conditions are true, then popup.offsetWidth is equal to the width set in the CSS.

Thanks to both menters for their help.

You can do like

var popupDiv = document.getElementsByClassName("popup")[0],
       width = window.getComputedStyle(popupDiv).width;

If you deal with a window or document type of element then getElementsByClassName(element,null), element.offsetWidth or element.clientWidth doesn't work. You have to access the width value like

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;