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功能不能按預期工作

回答

相關問題