jQuery dynamisch Elementhöhe ändern

Ich arbeite an einem Fluid-Layout-Projekt. Ich habe einige DIVs mit fester Höhe in meinem Dokument, und die Höhen sind für alle unterschiedlich. Ich muss diese DIVs Höhe auf Browserresize proportional ändern. Hier ist das Markup.jQuery dynamisch Elementhöhe ändern

<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 kenne, deshalb verwende ich .each (function()). Hier Skript schrieb ich:

$(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 einwandfrei, wenn der Benutzer die Seite neu lädt. Wie kann ich die gleichen Ergebnisse dynamisch erhalten, wenn der Benutzer die Größe des Browsers ohne Neuladen ändert? Ich weiß, ich sollte $ (window) .resize Event Listener anwenden. Aber das Problem ist, dass die Anfangshöhe des DIV innerhalb des Ereignisses berechnet wird und das Ergebnis fast wie eine Endlosschleife sein wird - das heißt, die endgültige Höhe wird in einer großen Progression zunehmen oder abnehmen. Das brauche ich nicht! Wie kann ich jede DIV Anfangshöhenberechnung außerhalb Ereignisfunktion machen und dann diese Höhen innerhalb Ereignisfunktion verwenden? Oder gibt es einen anderen Ansatz, um das gleiche Ergebnis zu erhalten?

Quelle

2012-06-16 theCoder

Sie müssen die ursprüngliche Höhe jedes Div speichern. Es gibt verschiedene Möglichkeiten, es 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); 
    }); 
});

Quelle

2012-06-16 17:45:39

Wirklich schnelle und einfache Lösung. Funktioniert perfekt. Vielen Dank! – theCoder

werfen Sie einen Blick auf die Resize-Ereignis, das Sie Ihre Resize-Funktionalität mit jquery

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

Quelle

2012-06-16 17:40:59 Nir

Wrap up und abonnieren Sie die Größe des Fensters Ereignis binden können.

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

Quelle

2012-06-16 17:41:00 Gabe

Verwendung .data die ursprüngliche Größe des div in Ihrem $ .each Funktion zu speichern

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

Sie in der Größe ändern Rückruf

die alten Größen später abrufen können

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

Hoffnung dies hilft

Quelle

2012-06-16 17:46:16

Kann nicht mit .data funktionieren. Aber es könnte meine Schuld sein, ich habe so wenig Javascript Erfahrung. Danke trotzdem. – theCoder

jQuery dynamisch Elementhöhe ändern

Antwort

Verwandte Themen