2013-04-23 104 views
4

我正在使用jQuery位置UI插件來定位網頁上的幫助器圖標。這是我的代碼負責的位置:jQuery UI在第一次加載時位置錯誤,第二次加載時出錯正確

if ($(element_selector).length !== 0 && $(title_class_selector).length !== 0 ) { 

    $(title_class_selector).position({ 
    my: "center", 
    at: cornerPosition, 
    offset:"<?php echo $x_coordinates_foradjustment;?> <?php echo $y_coordinates_foradjustment;?>", 
    of: $(element_selector) 

    }); 

    } 

凡cornerPosition具有以下可能值:

left top 
right top 
left bottom 
right bottom 

它工作得很好,直到我遇到一個問題,一個特定的div,我想追加圖標。在第一次加載時,位置是錯誤的(而不是左邊的底部它是左上方),而另一個而不是右上方,它是右下方。

這些受影響的element_selectors與他們的正確與錯誤的位置:

#wpv-featured-news-slider .span4:first-child .thumbnail 
Correct position: Left bottom 
Actual position on first loading of webpage: Left top 

#wpv-featured-news-slider 
Correct position: Right top 
Actual position on first loading of webpage: Right bottom 

奇怪的是,當我刷新頁面(重新加載頁面),它現在進入正確的位置! 這是緩存還是選擇器有問題?有沒有辦法在此添加一些檢查?我不喜歡改變element_selectors來糾正這個問題。

這個定位系統已經在我們不同的網站上得到了廣泛的應用,這是我看到這個問題的唯一場合(其餘的都可以)。這可能是一個非常孤立的案例。我搜索任何相關的問題,但找不到一個。任何提示和建議將會非常有幫助。謝謝。

回答

0

您是否考慮過任何圖像問題?有時,沒有指定高度/寬度的非高速緩存映像可能會導致位置問題。嘗試https://github.com/desandro/imagesloaded,看看這是否有幫助。

+0

謝謝Fatmuemoo我會檢查這個..乾杯。 – 2013-04-23 05:44:16

+0

我有同樣的問題,這不是解決方案。我的圖像是從緩存中加載的,如果我在幾秒鐘的定位上放置超時,它仍然有同樣的問題。 – 2015-07-14 15:39:06

0

jQuery UI使用collision detection並且在發現碰撞的情況下,它會將放置的物品置於不同的位置。未指定的默認值(如你的情況)是翻轉的,所以它會將元素翻轉到目標的相反一側(如你所描述的那樣)。

嘗試將碰撞更改爲「無」。

我有同樣的問題,只是影響初始加載頁面,但後續加載確定。

相關問題