javascript - remove - saber en que elemento se hizo click jquery

jQuery obtiene la ubicación de un elemento relativo a la ventana

Question

Dado un ID DOM HTML, ¿cómo obtener la posición de un elemento relativo a la ventana en JavaScript / JQuery? Esto no es lo mismo que en relación con el documento ni el elemento primario desplazado, ya que el elemento puede estar dentro de un marco flotante o de otros elementos. Necesito obtener la ubicación de la pantalla del rectángulo del elemento (como en posición y dimensión) tal como se muestra actualmente. Los valores negativos son aceptables si el elemento está actualmente fuera de la pantalla (se han desplazado).

Esto es para una aplicación de iPad (WebKit / WebView). Cada vez que el usuario toca un enlace especial en un UIWebView , se supone que debo abrir una vista de popover que muestra más información sobre el enlace. La vista de popover necesita mostrar una flecha que apunta hacia la parte de la pantalla que lo invoca.

Answer 1

Esto suena más como si quisiera una información sobre herramientas para el enlace seleccionado. Hay muchos tooltips jQuery, pruebe jQuery qTip . Tiene muchas opciones y es fácil cambiar los estilos.

De lo contrario, si quiere hacer esto usted mismo, puede usar jQuery .position() . Más información sobre .position() está en http://api.jquery.com/position/

$("#element").position(); devolverá la posición actual de un elemento relativo al origen del desplazamiento.

También está jQuery .offset que devolverá la posición relativa al documento.

Answer 2

Inicialmente, .offset posición .offset del elemento y calcule su posición relativa con respecto a la ventana

Referir :
1. offset
2. scroll
3. scrollTop

Puedes probarlo en este fiddle

Seguir unas pocas líneas de código explica cómo se puede resolver esto

cuando se .scroll evento .scroll , calculamos la posición relativa del elemento con respecto al objeto ventana

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

cuando el desplazamiento se realiza en el navegador, llamamos a la función del controlador de eventos anterior

fragmento de código

function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $(''#element'').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});

#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>

Answer 3

Pruebe el cuadro delimitador. Es sencillo:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)[''scrollLeft'']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)[''scrollLeft'']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)[''scrollTop'']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)[''scrollTop'']();

Answer 4

Pruebe esto para obtener la ubicación de un elemento relativo a la ventana.

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });

    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

Ver más @ Obtener la posición de un elemento relativo al documento con jQuery

Answer 5

TL; DR

headroom_by_jQuery = $(''#id'').offset().top - $(window).scrollTop();

headroom_by_DOM = $(''#id'')[0].getBoundingClientRect().top;   // if no iframe

.getBoundingClientRect() parece ser universal . .offset() y .scrollTop() han sido compatibles desde jQuery 1.2. Gracias @ user372551 y @prograhammer. Para usar DOM en un iframe, vea la solución de @ ImranAnsari .

Answer 6

    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative[''scrollTop''] (),
                    r : r.right  + relative[''scrollLeft''](),
                    b : r.bottom + relative[''scrollTop''] (),
                    l : r.left   + relative[''scrollLeft'']() 

            }
    }

    // Example
    trbl(e, window);

Answer 7

function getWindowRelativeOffset(parentWindow, elem) {
        var offset = {
            left : 0,
            top : 0
        };
        // relative to the target field''s document
        offset.left = elem.getBoundingClientRect().left;
        offset.top = elem.getBoundingClientRect().top;
        // now we will calculate according to the current document, this current
        // document might be same as the document of target field or it may be
        // parent of the document of the target field
        var childWindow = elem.document.frames.window;
        while (childWindow != parentWindow) {
            offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
            offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
            childWindow = childWindow.parent;
        }
        return offset;
    };

puedes llamarlo así

getWindowRelativeOffset(top, inputElement);

Me centro para IE solo según mi requisito, pero se puede hacer lo mismo para otros navegadores