jQuery width, outerWidth, innerWidth - return fake values

Question

I want to absolutely position my buckles for animation and this is my html:

<div id="about">
    <div id="weare">lorem.ipsum</div>
    <div id="who"><span id="whospan"><B>LOREMSIT.DOLOR</B></span></div>
    <div id="what"><div id="klamra_l">[</div><div id="klamra_r">]</div><span id="whatspan">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>

I am using for it jQuery:

function ustawklamry()
{
    var w_what = parseInt($("#what").outerWidth(true));
    var w_whatspan = parseInt($("#whatspan").outerWidth(true));
    var left = parseInt((w_what - w_whatspan)/2);
    var right = parseInt(left + w_whatspan);
    $("#klamra_l").css("left",left);
    $("#klamra_r").css("left",right);
    console.log(w_what + ";" + w_whatspan + ";" + left + ";" + right);
}

ustawklamry();

And what I get is:

And in console I see:

964;596;184;780

What is more, the space between buckles is equal to #whatspan (green field). I have no idea why it is not working. I tried width, outerWidth, innerWidth and no one is working. Please for help, if you want any additional data - ask.

Answer 1

First, I will address your following problem.

Oh my god, I see it is working good on fiddle but on my website not... I thought about problem while page is loading and I used $(document).ready(function(){... but it is not working too. Where is the problem?

This is because code from other parts of the page are be interfering with your code for this part of the page. If you can't find it anywhere in your javascript, then it must be in your CSS. Try opening up the dev tools (inspecting the page) and see what CSS values that menu is inheriting from its parent element in your production page. Then, try inspecting the JSfiddle page. Finally, try to get the CSS inherited from the parent element on the production page to be the same as the CSS inherited from the parent element on the JSFiddle page. Now it should work. Also, pay very close attention to !important tags. I have a sneaking suspicion that they might be the culprit.

To the next issue: you don't actually need javascript. Also, your layout is inflexible, it will look good on some devices, and bad on others because you don't make the size adaptive to the user's screen size. Here is a demo that works in IE9 and automatically resizes based on the user's screen size by using vw units in the font size, and transform: translateY(.125em) to center the brackets. Also, you could cut down on your DOM usage. Considering all these things, I hope you find this very useful:

#about {
    border: 2vw solid #FFF;
    padding: 3vw;
	//border-radius: 50% / 50%;
    display: inline-block;
	background-color: black;
	max-width: 80vw;
	outline: 99vh solid black;
	box-shadow: 0 0 0 99vw black;
	overflow: hidden;
	position: fixed;
	top:0;bottom:0;
	left:5vw;right:5vw;
	margin: auto 0;
	height: 17.5vw;
}
#weare {
    color: #FFF;
    font-size: 3vw;
    margin: 0 auto;
    text-align: center
}
#who {
    color: #FFF;
    font-size: 9vw;
    margin: 0 auto;
    font-family: Oswald, sans-serif;
    text-align: center;
    letter-spacing: 133%;
	font-weight: bold;
}
#what {
    color: #FFF;
    font-size: 2.5vw;
    margin: 0 auto;
    font-weight: 300;
    text-align: center;
	vertical-align: middle;
    background-color: red;
}
#greenbackground::before {
	direction: rtl;
}
#greenbackground::after, #greenbackground::before {
	content: ']';
	font-size: 2em;
	transform: translateY(.125em);
	background: none;
	line-height: 0;
	display:inline-block;
	color: white;
	width: 0;
}
#greenbackground {
	background:green;
	display:inline-block;
	height: 100%;
}

<div id="about">
	<div id="weare">lorem.ipsum</div>
	<div id="who">LOREMSIT.DOLOR</div>
	<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>

JSFiddle Link

To add some snazzy roundness to it, all you need is 1 extra line of code.

#about {
  border: 2vw solid #FFF;
  padding: 3vw;
	border-radius: 50% / 50%;
  display: inline-block;
	background-color: black;
	max-width: 80vw;
	outline: 99vh solid black;
	box-shadow: 0 0 0 99vw black;
	overflow: hidden;
	position: fixed;
	top:0;bottom:0;
	left:5vw;right:5vw;
	margin: auto 0;
	height: 17.5vw;
}
#weare {
    color: #FFF;
    font-size: 3vw;
    margin: 0 auto;
    text-align: center
}
#who {
    color: #FFF;
    font-size: 9vw;
    margin: 0 auto;
    font-family: Oswald, sans-serif;
    text-align: center;
    letter-spacing: 133%;
	font-weight: bold;
}
#what {
    color: #FFF;
    font-size: 2.5vw;
    margin: 0 auto;
    font-weight: 300;
    text-align: center;
	vertical-align: middle;
    background-color: red;
}
#greenbackground::before {
	direction: rtl;
}
#greenbackground::after, #greenbackground::before {
	content: ']';
	font-size: 2em;
	transform: translateY(.125em);
	background: none;
	line-height: 0;
	display:inline-block;
	color: white;
	width: 0;
}
#greenbackground {
	background:green;
	display:inline-block;
	height: 100%;
}

<div id="about">
	<div id="weare">lorem.ipsum</div>
	<div id="who">LOREMSIT.DOLOR</div>
	<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>

JSFiddle Link