即使加载窗口,jQuery width也会返回0

时间:2014-12-07 12:17:31

标签: javascript jquery css google-chrome width

我在Chrome和Safari中的$(window).load函数中遇到了jQuery css(' width')值的问题。

正常行为:

页面加载,访问者悬停菜单的一个元素,子菜单显示正确的列宽。

实际错误发生在:

用户访问网站,不等到页面完全加载以悬停菜单项...几秒钟后子菜单的列会崩溃。

您可以在http://www.pharmagooddeal.fr/beta678/上看到它(使用Chrome或Safari)。这是一个截图:

Screenshot of the collapsed columns

基本上发生的事情是JS文件启动以在窗口加载时调整不同菜单元素的大小。

这是脚本的内容(我自己没有编写代码):

$(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 < 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 > li > 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 > 0) {
            $(this).css('margin-left', '-' + i + 'px');
        }
        else
            $(this).css('margin-left', '0px');
    });
}


});

如果你向下滚动到&#34;函数resizeWidth()&#34;,你可以在下面看到一堆console.log,我想出了它出错的地方:

console.log('Option CSS Width: ' + option.css("width"));

如果我在我悬停菜单元素之前等到页面加载,则返回正常值,如果我在页面加载完成之前将其悬停,则返回0。

我尝试了不同的东西,但我无法弄清问题是什么。以下是其他控制台日志返回的内容:

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

提前感谢您的帮助。

0 个答案:

没有答案