HTML, jQuery: ancho de unión de un elemento a otro

Question

Me gustaría vincular el ancho de un primer elemento (foo) al ancho de un segundo elemento (barra). Me gustaría que el elemento "foo" cambiara de ancho automáticamente cuando se cambia el ancho del elemento "barra".

Sé que puedo establecer el ancho del elemento "foo" al ancho del elemento "barra" como podemos ver en el código siguiente, pero esto es algo que ocurre una sola vez. ¿Qué sucede si el ancho del elemento "barra" cambia en algún lugar del procesamiento de la página después de que se ejecuta este código? p.ej. "bar" es un elemento seleccionado y su ancho cambia como resultado de una llamada AJAX. ¿Cómo se cambiaría el ancho del elemento "foo"?

$('#foo').width($('#bar').width()); 

Gracias

Answer 1

eventos de cambio de tamaño sólo están vinculados a la ventana y no a elementos como divs, discusión completa aquí: jQuery resize not working at FireFox, Chrome and Safari

La única solución sería tener una variable global y utilizarlo para actualizar cuando se cambia el tamaño de la barra. El ancho de foo se establece en la variable global. Agregue código en el método o bloque de código que actualiza el tamaño de la barra, para actualizar la variable global o el tamaño foo directamente usando $ (foo) .width ($ bar.width());

function setBarHeight(value) { 
    $('#bar').attr('width') = Number(value); 
    $('#foo').attr('width') = $('#bar').attr('width'); 
} 

EDITAR: Este enfoque jQuery a continuación no funciona, la respuesta actualizada está por encima de esta línea. manejador de jQuery

Agregar para resize

$(document).ready(function() { 
    $('#bar').resize(function() { 
     $('#foo').width($('#bar').width()); 
    }); 
}); 

Answer 2

Coloque el código en una función y llamarla cada vez que hagas una llamada AJAX que tiene el potencial para cambiar las dimensiones. Si sus llamadas AJAX son esporádicas y, por algún motivo, no tiene control sobre ellas, puede usar setInterval para verificar cambios continuamente.

Su otra opción es utilizar un jQuery plugin como se menciona en los comentarios.

Answer 3

Como han dicho otras personas, no hay ningún evento que se dispare cuando las dimensiones de un elemento cambian, probablemente porque hay muchas maneras en que eso puede suceder. Tendrá que elegir los puntos que desea verificar y actualizar si es necesario.

Este es un buen caso para un modelo de publicación/suscripción: Básicamente, su elemento '#bar' publicaría un evento, diciendo "He cambiado el tamaño", y su elemento #foo se suscribiría a ese evento. Esto hace que sea fácil y escalable tener cualquier número de elementos publicados, y cualquier número suscribirse, sin que tengan que 'conocerse' entre sí.

con jQuery:

$(function(){ 
    // The document object acts as the 'subscription service' - 
    // it receives all events via bubbling. 
    document.bind('layout.resizeCheck', function(){ 
     $('#bar').width(whatever); 
    }); 

    // Whenever you need to update the size: 
    $('#foo').trigger('layout.resizeCheck'); 
}); 

Por supuesto, puede desencadenar el evento resizeCheck como usted quiera - en una devolución de llamada desde una petición AJAX, en un ciclo temporizado, cuando se cambia el tamaño de la ventana. Si no llama desde un elemento en particular, simplemente use $(document).trigger('layout.resizeCheck').

Answer 4

Prueba esto:

$('#bar').change(function() { 
    $('#foo').width($('#bar').width()); 
}); 

Este fragmento de código debería funcionar si su llamada AJAX se desencadena en la selección de valor desde el cuadro de selección #bar.También puede intentar usar .bind('keyup change', function(){...}); en lugar de .change(function{...});