Div de posición dependiendo de la distancia del borde del navegador (javascript)

Question

Estoy tratando de crear un pequeño script de información sobre herramientas que se basa principalmente en css. El bit de JavaScript que no puedo descifrar es cómo posicionar el div en función de su distancia al borde del navegador.

Cuando aparezca el div, me gustaría que compruebe qué tan cerca está de la parte superior, inferior, izquierda y derecha. Por ejemplo, si no hay espacio suficiente para mostrar el div encima del enlace de información sobre herramientas, debe colocarlo debajo del enlace.

Esencialmente me gustaría que el div esté "al tanto" de su posición y sepa a dónde ir para asegurarse de que sea visible.

Gracias

Answer 1

Ver Measuring Element Dimension and Location ayuda

Answer 2

Este cheat sheet para la Prototype library tiene un buen ejemplo.

Answer 3

Solo tuve que escribir un código muy similar para usarlo con tipsy (entonces mi solución usa jQuery). Aquí está la matemática básica, suponiendo que <div id="mydiv">...</div> es el div con el que estás trabajando. También tomo en cuenta la altura y el ancho del div al medir las distancias a los bordes derecho e inferior.

dTop, dBottom, dLeft, y dRight son la distancia desde la parte superior de la div, inferior, izquierda, y bordes derecho, respectivamente, para el mismo borde de la ventana gráfica. Si desea medir según la esquina superior izquierda del div, no resta dTop o dLeft al calcular dBottom y 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();