Jquery width() is giving wrong value when calculating the text width

Question

I have a simple text inside span. I just wanted to animate it from right to center of the #maincontainer. Therefore i did a calculation to make it center horizontally. I tried with outerWidth() as well. It didn't work. Here is the code.

<span id="headline">Hi There! Say hello to world.</span>

#maincontainer width is 728m But #headline container is giving wrong calculation every time.

$("#headline").css({"top": (($("#maincontainer").height()-($("#headline").height()))/2)}).delay(1e3).animate({
    "right":  $("#maincontainer").width() - $("#headline").width() + "px"
},5e2);

any fiddle available??

Suresh Ponnukalai
– Suresh Ponnukalai

2015-12-22 07:54:10 +00:00
Commented Dec 22, 2015 at 7:54 — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Dec 22, 2015 at 7:54
may be simpler with CSS.

Lambic
– Lambic

2015-12-22 07:55:59 +00:00
Commented Dec 22, 2015 at 7:55 — Lambic
– Lambic, Commented Dec 22, 2015 at 7:55

Lambic · Accepted Answer · 2015-12-22 20:03:20Z

3

1/ <span> as an inline element, has no dimensions. Asking for them will return "undefined".

Tranform <span> to an inline-block element with CSS.

<span style="display:inline-block" id="headline">

Why inline-block and not block ? Because you want the width of the displayed text only, and not the width of a whole block (same as the container probably).

2/ Also, width() or style.width will give a blank result if width has not been previously defined for the element.

In this case, use: $("#headline").offsetWidth

edited Dec 22, 2015 at 20:03

answered Dec 22, 2015 at 8:03

Lambic

1356 bronze badges

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

Comments

Abhishek Pandey · Accepted Answer · 2017-04-14 05:17:57Z

0

width() and height() methods don't work on html elements who has display:inline style.span by default is with display:inline. to fetch width or height you can use display:block or display:inline-block.

edited Apr 14, 2017 at 5:17

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

answered Dec 22, 2015 at 11:11

isambitd

86910 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery width() is giving wrong value when calculating the text width

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related