Vị trí div tùy thuộc vào cạnh trình duyệt từ xa (javascript)

Question

Tôi đang cố gắng tạo một tập lệnh chú giải công cụ nhỏ chủ yếu dựa vào css. Các bit JavaScript tôi không thể tìm ra là làm thế nào để vị trí div dựa trên khoảng cách của nó đến cạnh trình duyệt.

Khi div xuất hiện, tôi muốn nó kiểm tra xem nó ở gần trên cùng, dưới cùng, bên trái và bên phải. Ví dụ: nếu không có đủ không gian để hiển thị div phía trên liên kết chú giải công cụ, nó sẽ đặt vị trí đó bên dưới liên kết.

Về cơ bản tôi muốn div được "nhận thức" vị trí của nó và biết phải đi đâu để đảm bảo rằng nó hiển thị.

Cảm ơn

Answer 1

Xem Measuring Element Dimension and Location để được giúp đỡ

Answer 2

cheat sheet này cho Prototype library có một ví dụ tốt.

Answer 3

Tôi chỉ phải viết mã rất giống với bản thân mình, để sử dụng với tipsy (vì vậy giải pháp của tôi sử dụng jQuery). Đây là toán cơ bản, giả sử <div id="mydiv">...</div> là div bạn đang làm việc. Tôi tính toán chiều cao và chiều rộng của div khi đo khoảng cách đến cạnh phải và cạnh dưới.

dTop, dBottom, dLeft, và dRight là khoảng cách từ đỉnh của div, dưới, trái, và cạnh phải, tương ứng, với cùng cạnh của khung nhìn. Nếu bạn muốn đo lường dựa trên góc trên bên trái của div, không trừ dTop hoặc dLeft khi tính toán dBottom và dRight.

var $doc = $(document), 
    $win = $(window), 
    $this = $('#mydiv'), 
    offset = $this.offset(), 
    dTop = offset.top - $doc.scrollTop(), 
    dBottom = $win.height() - dTop - $this.height(), 
    dLeft = offset.left - $doc.scrollLeft(), 
    dRight = $win.width() - dLeft - $this.width();