如何知道什麼時候元素將被屏蔽？

-1

我正在寫一個簡單的腳本，當用戶將鼠標懸停在個人資料圖片上時顯示一個對話框。它動態地確定頁面上的配置文件圖片位置，然後將其自身放置在其左側並在其上方大約100px。這部分工作正常。如何知道什麼時候元素將被屏蔽？

我的問題出現在配置文件圖片位於屏幕的頂部並且用戶將鼠標懸停在屏幕上方時。該對話框將出現，但其頂部將在摺疊之上（即不在當前瀏覽器窗口中）。當然，這不是很好的可用性，我希望它出現在屏幕上。

我的問題是我怎麼知道對話框何時會被關閉，以便我可以重新計算它在頁面上的位置？

我看到this question這看起來跟我一樣，但不幸的是沒有提供任何實際的解決方案，然後鏈接到一個jQuery插件。我正在使用Prototype。

來源

2011-06-09 John Conde

樣機已經提供了Element.viewportOffset()位置。

編輯，正如Mathew指出document.viewport給出了其餘的信息。例如，

var dialogtop = dialog.viewportOffset().top; 
if (dialogtop < 0) { 
    // above top of screen 
} 
elseif (dialogtop + dialog.getHeight > document.viewport.getHeight()) { 
    // below bottom of screen 
}

來源

2011-06-09 15:03:30 clockworkgeek

這給了我需要的信息。謝謝。 – 2011-06-09 15:18:01

你要查找的資料相片的相對於文檔（這裏的a good article on how，雖然我懷疑樣機的Element.Offset已經處理了這一點），然後把它比作人體的scrollTop財產位置，看它是否足夠接近頂一下，它需要重新定位它的對話框。

來源

2011-06-09 14:35:34 RwwL

但是，我熟悉這個問題，上次我能夠使用庫（Seadragon）來獲取屏幕尺寸和鼠標位置。我還在使用固定大小的覆蓋圖，所以除了一般方法外，沒有代碼可以與您分享。

對於我的彈出框，我決定使用事件鼠標位置，而不是頁面上div的位置。然後，我將鼠標位置與已知的屏幕大小進行了比較，該大小是我在開始或調整大小時確定的。

從How do I get the size of the browser window using Prototype.js?

var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal 
var width = viewport.width; // Usable window width 
var height = viewport.height; // Usable window height

在原型你也可以得到鼠標座標：

function getcords(e){ 
mouseX = Event.pointerX(e); 
mouseY = Event.pointerY(e); 
//for testing put the mouse cords in a div for testing purposes 
$('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY; 
}

來源：http://remorse.nl/2008/06/mouse_coordinates_with_prototype/

來源

2011-06-09 14:36:47

如何知道什麼時候元素將被屏蔽？

回答

相關問題