webentwicklung-frage-antwort-db.com.de

jQuery ändert die Elementhöhe dynamisch

Ich arbeite an einem fließenden Layoutprojekt. Ich habe in meinem Dokument einige DIVs mit fester Höhe, und die Höhen sind für alle unterschiedlich. Ich muss diese DIVs proportional zur Browsergröße ändern. Hier ist das Markup.

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

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

Klingt einfach! Die Hauptbedingung ist, dass ich die genaue Anzahl der Ziel-DIVs und ihre IDs nicht kennt, deshalb verwende ich .each (function ()). Hier ist ein Skript, das ich geschrieben habe: 

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

});

Dieses Skript funktioniert perfekt, wenn der Benutzer die Seite neu lädt. Wie kann ich dinamisch dieselben Ergebnisse erzielen, wenn der Benutzer die Browsergröße ändert, ohne neu zu laden? Ich weiß, dass ich $ (window) .resize-Ereignislistener anwenden sollte. Das Problem ist jedoch, dass die anfängliche Höhe von DIV innerhalb des Ereignisses berechnet wird und das Ergebnis fast wie eine Endlosschleife aussieht. Dies bedeutet, dass die endgültige Höhe bei einem großen Fortschritt zunimmt oder abnimmt. Ich brauche das nicht! Wie kann ich each DIV anfängliche Höhenberechnung außerhalb der Ereignisfunktion erstellen und dann diese Höhen innerhalb der Ereignisfunktion verwenden? Oder gibt es vielleicht einen anderen Ansatz, um das gleiche Ergebnis zu erzielen?

jqueryheightwindow-resize
9
theCoder

Sie müssen die ursprüngliche Höhe jedes Divs speichern. Es gibt verschiedene Möglichkeiten, dies zu tun, hier ist ein Hack, speichern Sie es im DOM-Knoten selbst (es gibt bessere Möglichkeiten, aber das ist schnell und schmutzig).

$(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

Bauen Sie Ihre Größenänderungsfunktion zusammen und abonnieren Sie das Fenster zur Größenänderung.

$(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

werfen Sie einen Blick auf das Größenänderungsereignis, das Sie mit Jquery binden können

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

0
Nir

verwenden Sie .data, um die ursprüngliche Größe des div in Ihrer $ .each-Funktion zu speichern

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

sie können die alten Größen später im Callback für die Größenänderung abrufen

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

Hoffe das hilft

0
chris_code