JQuery功能不能按预期工作

我已经写了一个小函数来在浏览器窗口左侧和（居中）导航菜单之间中间放置一个徽标。菜单项从数据库填充，第一项给出id item0。JQuery功能不能按预期工作

function positionLogo(){ 
    var $menuleft=0; 
    var $element=document.getElementById('item0'); 
    if ($element.offsetParent) { 
     do { 
      $menuleft+=$element.offsetLeft; 
     } while ($element=$element.offsetParent); 
    } 
    var $logoleft=($menuleft/2)-130; // As logo is 260px wide 
    if ($logoleft<0) { 
     $logoleft=0; 
    } 
    $('#logo').css('left',$logoleft); 
} 

$(document).ready(function(){ 
    positionLogo(); 
}); 

$(window).resize(function(){ 
    positionLogo(); 
});

当窗口大小这工作得很好，但是当它第一次运行时加载页面时，它设置的位置大约是20像素太远权（即$ logoleft是20比它应该是）。只要页面调整大小，它就会跳转到正确的位置。

目前还没有住在任何地方，但有没有人有任何想法？谢谢！

来源

2010-03-27 Mike

只似乎是基于WebKit浏览器的问题，它仍然由1px的甚至与尼克的修复这样做，但这是够用了我！多谢你们。 – Mike 2010-03-27 03:50:41

我发现[XRAY]（http://www.westciv.com/xray/）适用于调试这样的事情。 – ScottCam 2010-03-27 03:30:48

替换此：

$(document).ready(function(){ 
    positionLogo(); 
}); 

$(window).resize(function(){ 
    positionLogo(); 
});

有了这个：

$(window).bind('load resize', positionLogo);

您需要的布局和各种规模完事（图像加载等），让您随心所欲的window.load方法，而不是document.ready。将bind()与空间分开的事件结合起来，你可以把它归结为一个简单的单行处理程序。另外一个注意事项，不需要仅在function() { }中包装函数，只需将函数名称像上面所示:)

来源

2010-03-27 03:37:23

谢谢你，出于某种原因，它仍然出来1px，但我不会抱怨的！ – Mike 2010-03-27 03:54:10

您是否尝试过处理window.onload？当DOM就绪这将触发时，页面完全加载，而不是（像$(document).ready）

来源

2010-03-27 03:32:42

已经使用了Nick的代码，但无论如何感谢 - 这也适用。 – Mike 2010-03-27 03:55:30

如果窗口大小的调整工作，那么也许你应该尝试触发了调整大小功能：

所以更换：

$(document).ready(function(){ 
    positionLogo(); 
});

有：

$(document).ready(function(){ 
    $(window).resize(); 
});

来源

2010-03-27 03:33:56 dkinzer

没有什么区别，但是谢谢！ – Mike 2010-03-27 03:51:13

我无法重复该现象。 IE中存在一些与offsetParent有关的bug，这可能与它有关，这取决于你如何定位元素。您可以在jQuery中使用offset方法来解决浏览器不兼容问题。

由于某种原因，即使在Firefox中没有指定left风格的单元，但它确实应该有一个。

function positionLogo(){ 
    var menuleft = $('#item0').offset().left; 
    var logoleft = Math.max(0, (menuleft/2) - 130); // As logo is 260px wide 
    $('#logo').css('left', logoleft + 'px'); 
}

或者干脆：

function positionLogo(){ 
    $('#logo').css('left', Math.max(0, ($('#item0').offset().left/2) - 130) + 'px'); 
}

来源

2010-03-27 03:58:43 Guffa

是的，你说得对，我应该指定一个单位。为了避免尝试定位像素的分数，我添加了一圈。感谢关于偏移量的提示。 – Mike 2010-03-27 04:34:04

JQuery功能不能按预期工作

回答

相关问题