jQuery cambia dinámicamente la altura del elemento

Estoy trabajando en un proyecto de diseño fluido. Tengo algunos DIV de altura fija en mi documento, y las alturas son diferentes para todos ellos. Necesito cambiar proporcionalmente la altura de estos DIV en el tamaño del navegador. Aquí está el marcado.jQuery cambia dinámicamente la altura del elemento

<body> 
<div id="a" class="target"></div> 
<div id="b" class="target"></div> 
<div id="c" class="target"></div> 
</body>

y CSS:

<style> 
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; } 
    #a { height: 200px; background-color: yellow;} 
    #b { height: 400px; background-color: green;} 
    #c { height: 600px; background-color: grey;} 
</style>

parece fácil! La condición principal es que i no conozco la cantidad de precinto de DIV objetivo y sus ID, es por eso que estoy usando .each (función()). Aquí es guión que escribió:

$(document).ready(function(){ 
//set the initial body width 
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/ 
$(".target").each(function() 
{ 
    //get the initial height of every div 
    var originalHeight = $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 
});

});

Este script funciona perfectamente cuando el usuario recarga la página. ¿Cómo puedo obtener los mismos resultados dinámicamente cuando el usuario cambia el tamaño del navegador sin volver a cargarlo? Sé que debería aplicar $ (window) .resize event listener. Pero el problema es que la altura inicial del DIV se calculará dentro del evento y el resultado será similar al del bucle sin fin, es decir, la altura final aumentará o disminuirá en una progresión enorme. ¡No necesito eso! ¿Cómo puedo hacer cada cálculo de altura inicial DIV fuera de la función de evento y luego utilizar estas alturas dentro de la función de evento? ¿O puede haber otro enfoque para obtener el mismo resultado?

Fuente

2012-06-16 theCoder

Necesita almacenar la altura original de cada div. Hay diferentes maneras de hacerlo, aquí hay un truco, guárdelo en el nodo DOM en sí (hay mejores formas, pero esto es rápido y sucio).

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    /*I need to go through all target divs because i don't know 
    how many divs are here and what are their initial height*/ 


    function resize() { 
    //This will only set this._originalHeight once 
    this._originalHeight = this._originalHeight || $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = this._originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 

    } 

    $(".target").each(resize); 
    $(document).resize(function(){ 
     $(".target").each(resize); 
    }); 
});

Fuente

2012-06-16 17:45:39

Solución realmente rápida y fácil. Funciona perfectamente. ¡Gracias! – theCoder

echar un vistazo en el evento de cambio de tamaño que se puede enlazar con jQuery

http://api.jquery.com/resize/

Fuente

2012-06-16 17:40:59 Nir

embala usted funcionalidad de cambio de tamaño y suscribirse a cambiar el tamaño de la ventana de eventos.

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    resizeTargets(); 
    $(window).resize(resizeTargets); 

}); 

function resizeTargets() 
{ 
    $(".target").each(function() 
    { 
     //get the initial height of every div 
     var originalHeight = $(this).height(); 
     //get the new body width 
     var bodyWidth = $("body").width(); 
     //get the difference in width, needed for hight calculation 
     var widthDiff = bodyWidth - originalWidth; 
     //new hight based on initial div height 
     var newHeight = originalHeight + (widthDiff/10); 
     //sets the different height for every needed div 
     $(this).css("height", newHeight); 
    }); 
}

Fuente

2012-06-16 17:41:00 Gabe

.data utilizar para almacenar el tamaño inicial de la div dentro de su función each $

$(this).data('height', $(this).height()); 
$(this).data('width', $(this).width());

posteriormente puede recuperar los viejos tamaños dentro de la devolución de llamada de cambio de tamaño

var old_height = $(this).data('height'); 
var old_width = $(this).data('width');

Esperanza esto ayuda a

Fuente

2012-06-16 17:46:16

No se puede hacer funcionar con .data. Pero podría ser mi culpa, tengo muy poca experiencia en JavaScript. Gracias de cualquier manera. – theCoder

jQuery cambia dinámicamente la altura del elemento

Respuesta

Cuestiones relacionadas