Pozycja div w zależności od krawędzi przeglądarki odległości (javascript)

Question

Próbuję utworzyć skrypt z małym skryptem narzędziowym, który w większości opiera się na css. Nie mogę się domyślić, jak ustawić div na podstawie jego odległości od krawędzi przeglądarki.

Po wyświetleniu elementu div chciałbym sprawdzić, jak blisko jest góra, dół, lewo i prawo. Na przykład, jeśli nie ma wystarczającej ilości miejsca, aby wyświetlić element div powyżej linku z podpowiedziami, powinien on umieścić go pod linkiem.

Zasadniczo chciałbym, aby div był "świadomy" swojej pozycji i wiedział, gdzie się udać, aby upewnić się, że jest widoczny.

Dzięki

Answer 1

Zobacz Measuring Element Dimension and Location o pomoc

Answer 2

Ten cheat sheet dla Prototype library ma dobry przykład.

Answer 3

Po prostu musiałem napisać sam bardzo podobny kod, do użytku z tipsy (więc moje rozwiązanie wykorzystuje jQuery). Oto podstawowa matematyka, zakładając, że <div id="mydiv">...</div> to div, z którym pracujesz. Uwzględniam wysokość i szerokość elementu div podczas pomiaru odległości na prawą i dolną krawędź.

dTop, dBottom, dLeft i dRight są odległości od div górnej, dolnej, lewej i prawej krawędzi, odpowiednio, do tej samej krawędzi widoku. Jeśli chcesz zmierzyć w oparciu o lewy górny róg elementu div, nie odejmuj dTop ani dLeft podczas obliczania dBottom i 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();