Wie kann ich dieses Javascript-Problem mit maximaler Höhe beheben oder CSS verwenden, um dieselben Ergebnisse zu erzielen?

Question

Ich arbeite mit dem Interspire-Einkaufswagen und es gibt ein wenig Code in common.js, der die Höhe der Produkt-Display-Boxen für Dinge wie "Featured-Produkte" steuert. Es macht es so, dass alle Elemente auf der gleichen Höhe sind. Das macht alles gut, aber das scheint in Firefox nicht zu funktionieren. Die Produktanzeigen sehen in Chrome und IE gut aus, aber auf Firefox erweitern sich die Box-Höhen auf 4000+ Pixel! Noch seltsamer ist es manchmal, wenn ich den Refresh-Button drücke, wird es korrekt korrigiert und angezeigt. Ich kann wieder auffrischen und es ist wieder vermasselt. Site-Tester haben das gleiche Problem.

ich das Stück Code entfernt und die Höhe der Felder in der CSS-Datei gesetzt, aber dann die Elemente sind alle mit unterschiedlichen Höhen und das Display sieht nicht sehr gut aus. Also lege ich den Code zurück und bin ratlos.

Ich denke, ich werde diesen Code loswerden und versuchen, das gleiche Ergebnis nur über CSS zu erreichen. Ist das möglich? Ich bin mir nicht sicher, wie das geht, damit alle Elemente auf der gleichen Höhe sind.

Der Kommentar der Interpsire Codierer setzen ist, dass dieses Stück Code ein 'Hack Job' ist ...

// Ensure that all product lists are the same height 
function setProductListHeights(imgName, className) { 
    // hack job putting this here but it needs to be reused by search ajax pager 
    if (typeof(DesignMode) != 'undefined') { 
     return; 
    } 

    if (typeof imgName != 'undefined') { 
     if (typeof loadedImages[imgName] != 'undefined') { 
      return; 
     } 

     loadedImages[imgName] = true; 
    } 

    setProductThumbHeight(); 
    /** 
    * Sets the height of the elements passed in to match that of the one that 
    * has the greatest height. 
    * 
    * @param ele The element(s) to adjust the height for. 
    * @return void 
    */ 
    function setHeight(ele) { 
     var ele  = $(ele), 
      maxHeight = 0; 

     ele 
      // reset the height just in case it was set by the stylesheet so 
      // we can detect it 
      .css('height', 'auto') 
      // get the one with the greatest height 
      .each(function() { 
       if ($(this).height() > maxHeight) { 
        maxHeight = $(this).height(); 
       } 
      }) 
      // and set them all to the greatest height 
      .css('height', maxHeight); 
    } 

    if (!className) { 
     className = '.Content'; 
    } 

    setHeight(className + ' .ProductList:not(.List) li .ProductDetails'); 

    if (typeof imgName != 'undefined') { 
     setHeight(className + ' .ProductList:not(.List) li .ProductPriceRating:has(img[src$='+imgName+'])'); 
    } 

    setHeight(className + ' .ProductList:not(.List) li'); 
} 

Thanks so much! Ich habe versucht, dies für eine Weile zu beheben, insbesondere für einige benutzerdefinierte Sales Panels, die ich erstellt habe.

Answer 1

Das einzige mögliche Problem, das ich sehen kann, ist mit dem folgenden:

css ('height', maxHeight);

keine Maßeinheit angegeben ist, versuchen, die Maßeinheit maxHeight Anfügen:

Css ('height', maxHeight + 'px');

Answer 2

Am Ende änderte ich 'auto' der Zeile .css ('height', 'auto') auf 250. Das scheint gut auszusehen.

Answer 3

Das gleiche Problem hier. Ich nehme an, dass Interspire dies bereits behoben hat, und mein Client verwendet eine alte Version. Ich habe versucht, die vorgeschlagene Lösung Hardcoding die Höhe Größe, aber dann verlor ich die "Add to Cart" -Link unter dem Produkt - ich denke, weil diese Funktion für eine Reihe von Objektmengen aufgerufen wird und die frühen Sätze müssen kleiner sein als die späteren Einsen.

Ich bin ziemlich sicher, dass das Problem ein Timing-Problem ist, weil ich den Fehler nicht reproduzieren konnte, wenn ich es mithilfe der FF Developer-Tools (mit einem bedingten Haltepunkt zu stoppen, wenn maxHeight über 300 explodierte). Meine Lösung, die zu halten scheint, ist zu prüfen, ob ich eine gültige Nummer haben, bevor der Vergleich tun und für eine gute Maßnahme setzen eine Obergrenze für die Größe:

if (typeof ($(this).height()) == "number" && $(this).height() > maxHeight) { 
    if ($(this).height() < 300) { 
    maxHeight = $(this).height(); 
    } 
} 

Answer 4

ich eine feste Höhe eingestellt haben, sondern auch eine Variation der Funktion "Höhe einstellen" eingeführt, um zu verhindern, dass die Links zum Hinzufügen zum Warenkorb vom Bildschirm verschoben werden.

Es gibt wahrscheinlich eine prägnantere Art, dies zu tun, aber ich hatte wenig Zeit.

function setHeight(ele) { 
    var ele  = $(ele), 
     maxHeight = 0; 

    ele 
     // reset the height just in case it was set by the stylesheet so 
     // we can detect it 
     .css('height', 'auto') 
     // get the one with the greatest height 
     /* 
     .each(function() { 
      if ($(this).height() > maxHeight) { 
       maxHeight = $(this).height(); 
      } 
     }) 
     */ 
     // and set them all to the greatest height 
     //.css('height', maxHeight); 
     // edited as was causing 700+ height in firefox 
     .css('height', 250); 
} 

function setHeightProdDetails(ele) { 
    //variant function added for speed to correct firefox height issue 
    var ele  = $(ele), 
     maxHeight = 0; 

    ele 
     // reset the height just in case it was set by the stylesheet so 
     // we can detect it 
     .css('height', 'auto') 
     .css('height', 60); 
} 

setHeightProdDetails('.Content .ProductList:not(.List) li .ProductDetails'); 

if (typeof imgName != 'undefined') { 
    setHeight('.Content .ProductList:not(.List) li .ProductPriceRating:has(img[src$='+imgName+'])'); 
} 

setHeight('.Content .ProductList:not(.List) li');