title: jQuery width returns 0 for even when window is loaded
body: <p>I am having an issue with a jQuery css('width') value inside a $(window).load function in Chrome and Safari.</p>
  
  <p><em>Normal behaviour:</em></p>
  
  <p>The page loads, visitor hovers an element of the menu, the sub menu appears with correct column widths.</p>
  
  <p><em>Actual bug occurs when:</em></p>
  
  <p>The user accesses the website, doesn't wait until the page is fully loaded to hover a menu item... after a few seconds the sub menu's columns collapse.</p>
  
  <p>You can see it live on <a href="http://www.pharmagooddeal.fr/beta678/" rel="nofollow noreferrer">http://www.pharmagooddeal.fr/beta678/</a> (use Chrome or Safari). Here is a screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/3Ut7H.png" alt="Screenshot of the collapsed columns"></p>
  
  <p>Basically what happens is a JS file kicks in to resize different menu elements on window load.</p>
  
  <p>Here is the script's content (I didn't code it myself) :</p>
  
  <pre><code>$(window).load(function(){
      resizeWidth();
  
  (function($,sr){
    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) {
        var timeout;
  
        return function debounced () {
            var obj = this, args = arguments;
            function delayed () {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null; 
            };
  
            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);
  
            timeout = setTimeout(delayed, threshold || 100); 
        };
    }
  // smartresize 
   jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
  
  })(jQuery,'smartresize');
  
  
  var TO = false;
  $(window).resize(function(){
   if(TO !== false)
      clearTimeout(TO);
   TO = setTimeout(resizeWidth, 400); //400 is time in miliseconds
  });
  
  function resizeWidth()
  {   var number1=123.15;
      var number=Math.round(number1).toFixed(2);
  
      var menuWidth = 1180;
      var numColumn = 5;
      var currentWidth = $("#menu").width()-2;
      if (currentWidth &lt; menuWidth) {
  
          new_width_column = currentWidth / numColumn;
          $('#menu div.options_list').each(function(index, element) { 
              var options_list = $(this).next();
              var span_options_list = options_list.attr('styleWidth');
              console.log('Span options list: ' + span_options_list);
              $(this).width(parseFloat(span_options_list)/menuWidth*numColumn * new_width_column);        
          });
          $('#menu div.option').each(function(index, element) {
              var option = $(this).next();
              var woption=parseFloat(option.css("width"))/menuWidth*numColumn * new_width_column-0.5; 
              console.log('Option CSS Width: ' + option.css("width"));
              console.log('Option Width: ' + option.width());
              console.log('Option Inner Width: ' + option.innerWidth());
              console.log('Option Outer Width: ' + option.outerWidth());
              console.log('Menu Width: ' + menuWidth);
              console.log('Num column: ' + numColumn);
              console.log('New width column: ' + new_width_column);
              console.log('Woption: ' + woption);
              var woption1=Math.round(woption).toFixed(2);
              $(this).width(woption1);
              console.log('Woption1: '+woption1);
              console.log('-----------------');
  
              var wul= parseFloat(option.css("width"))/menuWidth*numColumn * new_width_column-0.5;
              var wul1=Math.round(wul).toFixed(2);
              $("ul", this).width(parseFloat(option.css("width"))/menuWidth*numColumn * new_width_column);
  
          });
          $('#menu ul.column').each(function(index, element) {
              var column = $(this).next();
              var wul=parseFloat(column.css("width"))/menuWidth*numColumn * new_width_column-0.5;
              var wul1=Math.round(wul).toFixed(2);
              $(this).width(wul1);
          });
      }
  
      $('#menu ul &gt; li &gt; a + div').each(function(index, element) {
          var menu = $('#menu').offset();
          var dropdown = $(this).parent().offset();
          i = (dropdown.left + $(this).width()) - (menu.left + $('#menu').width());
          if (i &gt; 0) {
              $(this).css('margin-left', '-' + i + 'px');
          }
          else
              $(this).css('margin-left', '0px');
      });
  }
  
  
  });
  </code></pre>
  
  <p>If you scroll down to "function resizeWidth()", you can see a bunch of console.log below, I figured out where it goes wrong:</p>
  
  <pre><code>console.log('Option CSS Width: ' + option.css("width"));
  </code></pre>
  
  <p>This one returns a normal value if I wait until the page is loaded before I hover a menu element, or 0 if I hover before the page has finished loaded.</p>
  
  <p>I have tried different things but I can't figure out what the problem is. Here is what the other console logs return:</p>
  
  <pre><code>Option CSS Width: 0px
  csmegamenu_front.js:59 Option Width: 0
  csmegamenu_front.js:60 Option Inner Width: 0
  csmegamenu_front.js:61 Option Outer Width: 0
  csmegamenu_front.js:62 Menu Width: 1180
  csmegamenu_front.js:63 Num column: 5
  csmegamenu_front.js:64 New width column: 235.6
  csmegamenu_front.js:65 Woption: -0.5
  csmegamenu_front.js:68 Woption1: 0.00
  </code></pre>
  
  <p>Thanks in advance for your help.</p>