firefox offsetWidth not reporting anything.

Question

I'm trying to do some dynamic resizing using javascript. For part of this I need to report the current size of a container. I wrote a function to do this (below) and it works great in chrome... however in firefox the width does not get reported. I have had a read on the offsetWidth method and in theory it should work in firefox.

function currentBoxW() {
    return document.getElementById("wrapper").offsetWidth;
}

All this reports is "NaN".

There is more in that function in the actual page, but all the additional code has been commented out for testing... this is the actual line that does the reporting.

Have I missed something or is there a smarter way to report width using JS and the DOM? Is there another way to get the width of a div?

Thanks.

Answer 1

You can have two problems:

1. Make sure you have explicity set the width of the element (wrapper) through CSS
2. Make sure javascript code is executing after document is ready. window.onload() or something similar if you are using any other javascript libaries

If you can use jquery instead you can easily get it using

$(document).ready(function(){ 
  function currentBoxW() {
    return $('#wrapper').width();
    or 
    return $('#wrapper').innerWidth(); //depending on the requirement. 
  }

});