2

When I try to check the width of some text by calling the .width() of the span the text is in, I always get a wrong value at first. Then why I call .width() again, I get the right value.

I'm adding the text using .append() then I want to get the width of it immediately. When I open my file through Chrome directly (not using the Internet to get to Dropbox.com), it gets the width value correctly 99% of the time. Could this be a loading issue?

Here's an example: https://dl.dropboxusercontent.com/u/98788053/School/test.html

<script>
  $(document).ready(function() {
    $("body").append("<span id=\"element\">Text to measure</span>");
    $("body").append("<div id=\"thewidth\"></div>");
    $("body").append("<input type=\"button\" value=\"Try again\" onclick=\"getWidth();\">");
    getWidth();
  });
  function getWidth()
  {
    $("#thewidth").html($("#element").width()+"px");
  }
</script>
Travis J
  • 81,153
  • 41
  • 202
  • 273
user1778856
  • 641
  • 4
  • 10
  • 17
  • it most likely is a loading issue as you suggest. maybe wrap it in a `$(document).ready()` – km6zla May 21 '13 at 22:19
  • @ogc-nick - It is wrapped in `document.ready`. – Travis J May 21 '13 at 22:21
  • @Zenith - That is not a duplicate, because this is actually loading a custom font which is causing the discrepancy. – Travis J May 21 '13 at 22:21
  • put the call for width into a setTimeOut some super-small amount and see if that fixes the issue. If so, then it's just a loading issue. – DA. May 21 '13 at 22:22
  • Oh yea, if it's loading an external asset (the font) then you have to wait for that to happen. How to do that reliably might be a bit trickier. – DA. May 21 '13 at 22:23
  • Editing "NOT A DUPLICATE" into your question is not helpful. It is indeed a dup. – tckmn May 22 '13 at 23:24
  • Please read it more carefully – user1778856 May 23 '13 at 04:38
  • @Doorknob - It is in fact not a duplicate as the issue was with loading content, and not checking width. The check for `width` is done accurately in one single call to the jQuery API. It is literally one line of code that works. The linked answer has nothing to do with the situation depicted here. – Travis J May 23 '13 at 06:43

1 Answers1

1

jsFiddle Demo

There is a difference between document.ready and window.onload, mainly that document.ready from jQuery will actually fire before images are fully loaded (or custom font in your case) because the DOM is technically ready.

For that situation, I would suggest you try this instead:

<script>
window.onload = function(){
  $("body").append("<span id=\"element\">Text to measure</span>");
  $("body").append("<div id=\"thewidth\"></div>");
  $("body").append("<input type=\"button\" value=\"Try again\" onclick=\"getWidth();\">");
  getWidth();
};
function getWidth()
{
  $("#thewidth").html($("#element").width()+"px");
}
</script>

This almost works. There is one more step. In order to fully preload the font, you need to have an element on the page which will trigger the load. It can be empty, and this example will not affect your layout:

<span style="font-family: JennaSue;visibility:hidden;"></span>

From my tests, you cannot do this from a script in the head, it must be done inside of the <body> tags.

Travis J
  • 81,153
  • 41
  • 202
  • 273