web-dev-qa-db-fra.com

jQuery change dynamiquement la hauteur de l'élément

Je travaille sur un projet de mise en page fluide. J'ai des DIV à hauteur fixe dans mon document, et les hauteurs sont différentes pour toutes. Je dois modifier proportionnellement la hauteur de ces DIV lors du redimensionnement du navigateur. Voici le balisage.

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

Et 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>

Cela semble facile! La principale condition est que je ne connaisse pas la quantité précise de DIVs cibles et leurs ID , c’est pourquoi j’utilise .each (fonction ()). Voici le script que j'ai écrit: 

$(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); 
});

});

Ce script fonctionne parfaitement lorsque l'utilisateur recharge la page. Comment puis-je obtenir les mêmes résultats, lorsque l’utilisateur redimensionne le navigateur sans recharger? Je sais que je devrais appliquer l’écouteur d’événements $ (fenêtre) .resize. Mais le problème est que la hauteur initiale de DIV sera calculée à l'intérieur de l'événement et le résultat sera presque comme une boucle sans fin - c'est-à-dire que la hauteur finale augmentera ou diminuera avec une progression énorme. Je n'ai pas besoin de ça! Comment puis-je faire chaque DIV le calcul de hauteur initiale en dehors de la fonction événement et ensuite utiliser ces hauteurs dans la fonction événement? Ou peut-être y at-il une autre approche pour obtenir le même résultat?

jqueryheightwindow-resize
9
theCoder

Vous devez stocker la hauteur d'origine de chaque div. Il y a différentes façons de le faire, voici un hack, stockez-le dans le nœud DOM lui-même (il y a de meilleurs moyens, mais c'est rapide et sale).

$(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);
  });
});
14
Juan Mendes

Terminez votre fonctionnalité de redimensionnement et abonnez-vous à l'événement de redimensionnement de la fenêtre.

$(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); 
   });
}
2
Gabe

jetez un oeil à l'événement de redimensionnement que vous pouvez lier avec jQuery

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

0
Nir

utilisez .data pour stocker la taille initiale de la div dans votre fonction $ .each

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

vous pouvez récupérer ultérieurement les anciennes tailles dans le rappel de redimensionnement

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

J'espère que cela t'aides

0
chris_code