Home › Forums › JavaScript › Jquery OuterWidth showing wrong width
- This topic is empty.
-
AuthorPosts
-
August 12, 2015 at 10:30 am #206439
dev027
Participanthttp://codepen.io/stevewrightuk/pen/rVbLJY
The codepen above has been stripped down to just the problem lines of code.
It is dynamically creating a <button> an appending it to a
<div>
. Inside the button is an<i>
for the font-awsome icon and for the button text.What I am trying to get is the width of the button.
When I attach the button, the “init” function reports a outerWidth of 113. The inspector window shows a width of 115. The onclick also reports a width of 115.
So why does the init function report it as 2 pixels shorter?
August 12, 2015 at 11:34 am #206444nkrisc
ParticipantLooking at your codepen example, I see it displaying 116 and when I inspect it I see a width of 116.5px
Maybe it’s a browser or partial pixel issue?
August 12, 2015 at 12:38 pm #206448Senff
ParticipantFor me, it shows 113 at first, then a fraction of a second later it updates its value to 115. When I click on the button, it does say 115 as well.
(using Chrome on Windows 7)
August 12, 2015 at 2:19 pm #206456Shikkediel
ParticipantI think it’s about the function firing to quickly initially because it’s missing a doc ready wrapper. After refreshing the page, the pixel width seems correct.
August 12, 2015 at 2:36 pm #206458dev027
Participant@Shikkediel I took your idea and added a document.ready, but it made no difference.
Further investigation with different browsers on Windows 8 reveals:
IE11: Shows 114 initially and 114 after the onclick.
Opera31: Shows 115 initially and 115 after the onclick.
Safari5.1: Shows 101 initially and 114 after the onclick. Refreshing the page and it shows 114 initially.
Firefox40: Shows 114 initially and 114 after the onclick.
Chrome44: Shows 113 initially and 115 after the onclick. Refreshing the page and it shows 115 initially.I can understand some browsers reporting 114 and others 115 due to rounding issues. What confuses me is that some report it as one value and then a few seconds later report as a larger value.
August 12, 2015 at 2:56 pm #206459Shikkediel
ParticipantIndeed… strange. Opera 28 on Windows 7 shows 113 initially as well by the way.
August 12, 2015 at 4:41 pm #206462Shikkediel
ParticipantAugust 13, 2015 at 1:14 am #206469dev027
Participant@Shikkediel That makes sense. I’ve a few alternative ideas that will fix my problem so I’ll try the ones that don’t required an immediate outerWidth.
Thanks
August 13, 2015 at 6:01 am #206478nkrisc
ParticipantForgot to mention my observation was on latest Chrome on OSX.
June 14, 2016 at 8:02 am #242849Azamat Galiyev
ParticipantLook here https://jsfiddle.net/c8reymy8/
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.