examples - jquery pdf

¿Cómo posicionar un elemento relativo a otro con jQuery?

Question

Tengo un DIV oculto que contiene un menú similar a una barra de herramientas.

Tengo una serie de DIV que están habilitados para mostrar el menú DIV cuando el mouse se sitúa sobre ellos.

¿Existe una función incorporada que mueva el menú DIV a la parte superior derecha del DIV activo (desplazamiento del mouse)? Estoy buscando algo como $(menu).position("topright", targetEl);

Answer 1

¿Algo como esto?

$(menu).css("top", targetE1.y + "px"); 
$(menu).css("left", targetE1.x - widthOfMenu + "px");

Answer 2

¿Por qué complicar demasiado? La solución es muy simple.

css:

.active-div{
position:relative;
}

.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}

jquery

$(function(){
    $(".active-div").hover(function(){
    $(".menu-div").prependTo(".active-div").show();
    },function(){$(".menu-div").hide();
})

Funciona incluso si,

• Dos divs colocados en cualquier otro lugar.
• Tamaño del navegador

Answer 3

Ahora puedes usar:

$("#my_div").position({
    my:        "left top",
    at:        "left bottom",
    of:        this, // or $("#otherdiv")
    collision: "fit"
});

Para posicionamiento rápido ( jQuery UI / Position ).

NOTA: Esto requiere jQuery UI (no solo jQuery).

Puedes descargar jQuery UI aquí .

Answer 4

Aquí hay una función jQuery que escribí que me ayuda a posicionar elementos.

Aquí hay un ejemplo de uso:

$(document).ready(function() {
  $(''#el1'').position(''#el2'', {
    anchor: [''br'', ''tr''],
    offset: [-5, 5]
  });
});

El código anterior alinea la parte inferior derecha de # el1 con la parte superior derecha de # el2. [''cc'', ''cc''] centraría # el1 en # el2. Asegúrese de que # el1 tenga el css de position: absolute y z-index: 10000 (o algún número realmente grande) para mantenerlo en la parte superior.

La opción de desplazamiento le permite desplazar las coordenadas un número específico de píxeles.

El código fuente está abajo:

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: [''tl'', ''tl''],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var left = targetBox.left;
  var top = targetBox.top;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  //add offset to final coordinates
  left += options.offset[0];
  top += options.offset[1];

  $(this).css({
    left: left + ''px'',
    top: top + ''px''
  });

}

Answer 5

Esto es lo que funcionó para mí al final.

var showMenu = function(el, menu) {
    //get the position of the placeholder element  
    var pos = $(el).offset();    
    var eWidth = $(el).outerWidth();
    var mWidth = $(menu).outerWidth();
    var left = (pos.left + eWidth - mWidth) + "px";
    var top = 3+pos.top + "px";
    //show the menu directly over the placeholder  
    $(menu).css( { 
        position: ''absolute'',
        zIndex: 5000,
        left: left, 
        top: top
    } );

    $(menu).hide().fadeIn();
};

Answer 6

Esto funciona para mí:

var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$(''#personTooltipContainer'').css({top: tPosY, left: tPosX});

Answer 7

Puedes usar el plugin jQuery PositionCalculator

Ese complemento también ha incluido el manejo de colisiones (voltear), por lo que el menú similar a la barra de herramientas se puede colocar en una posición visible.

$(".placeholder").on(''mouseover'', function() {
    var $menu = $("#menu").show();// result for hidden element would be incorrect
    var pos = $.PositionCalculator( {
        target: this,
        targetAt: "top right",
        item: $menu,
        itemAt: "top left",
        flip: "both"
    }).calculate();

    $menu.css({
        top: parseInt($menu.css(''top'')) + pos.moveBy.y + "px",
        left: parseInt($menu.css(''left'')) + pos.moveBy.x + "px"
    });
});

para ese marcado:

<ul class="popup" id="menu">
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

<div class="placeholder">placeholder 1</div>
<div class="placeholder">placeholder 2</div>

Aquí está el violín: http://jsfiddle.net/QrrpB/1657/

Answer 8

tl; dr: (inténtalo here )

Si tienes el siguiente HTML:

<div id="menu" style="display: none;">
   <!-- menu stuff in here -->
   <ul><li>Menu item</li></ul>
</div>

<div class="parent">Hover over me to show the menu here</div>

entonces puedes usar el siguiente código de JavaScript:

$(".parent").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});

¡Pero no funciona!

Esto funcionará siempre que el menú y el marcador de posición tengan el mismo elemento principal desplazado. Si no lo hacen, y no tiene reglas CSS anidadas que se ocupen de dónde se encuentre el elemento #menu en DOM, use:

$(this).append($("#menu"));

justo antes de la línea que posiciona el elemento #menu .

¡Pero todavía no funciona!

Es posible que tenga un diseño extraño que no funcione con este enfoque. En ese caso, solo use el plugin de posición jQuery.ui (como se menciona en la answer continuación), que maneja cada eventualidad concebible. Tenga en cuenta que tendrá que show() el elemento del menú antes de llamar a la position({...}) ; El plugin no puede colocar elementos ocultos.

Actualización de notas 3 años después en 2012:

(La solución original se archiva here para la posteridad)

Entonces, resulta que el método original que tenía aquí estaba lejos de ser ideal. En particular, fallaría si:

• el padre de compensación del menú no es el padre de compensación del marcador de posición
• el marcador de posición tiene un borde / relleno

Afortunadamente, jQuery introdujo los métodos ( position() y outerWidth() ) en 1.2.6 que hacen mucho más fácil encontrar los valores correctos en este último caso. Para el primer caso, append el elemento de menú a los marcadores de posición funciona (pero romperá las reglas CSS basadas en el anidamiento).