Reset jquery max-height wenn Geräteausrichtung ändert

Question

Ich verwende diese Funktion mehr lesen https://css-tricks.com/text-fade-read-more/

Wenn die Anzeige auf einem Mobil/Tablet-Gerät und Sie die weitere Schaltfläche lesen klicken Sie auf die Ausrichtung des Geräts ändert sich die Höhe Die Box ist entweder zu groß (von Portrait zu Landschaft) oder abgeschnitten (von Landschaft zu Portrait).

Gibt es eine Möglichkeit in der jQuery diese Höhe zurückzusetzen, wenn sich die Ausrichtung ändert? Dies ist der Code, den ich

<script> 
var jq14 = jQuery.noConflict(true); 
(function ($) { 
    $(document).ready(function() { 
     // your logic 

     var mq = window.matchMedia("(min-width: 767px)"); 

     var $el, $ps, $up, totalHeight; 

     $(".fade-box .button-read-on").click(function() { 

      totalHeight = 0 

      $el = $(this); 
      $p = $el.parent(); 
      $up = $p.parent(); 
      $ps = $up.find("p:not('.read-more')"); 

      // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph) 
      $ps.each(function() { 
       totalHeight += $(this).outerHeight(); 
       // FAIL totalHeight += $(this).css("margin-bottom"); 
      }); 

      $up 
       .css({ 
        // Set height to prevent instant jumpdown when max height is removed 
        "height": $up.height(), 
        "max-height": 9999 
       }) 
       .animate({ 
        "height": totalHeight 
       }) 
       .click(function() { 
        //After expanding, click paragraph to revert to original state 
        $p.fadeIn(); 

        if (mq.matches) { 
         $up.animate({ 
          "height": 190 
         }); 
        } else { 
         $up.animate({ 
          "height": 210 
         }); 
        } 

       }); 

      // fade out read-more 
      $p.fadeOut(); 

      // prevent jump-down 
      return false; 

     }); 
    }); 

} (jq14)) verwenden;

Answer 1

Sie von jQuery Mobile Orientierungsänderung

$(window).on("orientationchange",function(){ 
    //you can get the screen size 
    var windowWidth = $(window).width(), 
    var windowHeight = $(window).height(); 
    //some code 
}); 

Hinweis verwenden können, die Sie jQuery Mobile für benötigen diese, Ich bin nicht sicher, ob es funktioniert mit regelmäßigen jQuery, aber es lohnt sich, einen Blick

geben

Answer 2

bin dies versuchen. Es funktioniert für mich. genießen =)

window.addEventListener("orientationchange", function() { 
 
    // Announce the new orientation number 
 
    //alert(screen.orientation); 
 
    var windowWidth = $(window).width(); 
 
    var windowHeight = $(window).height(); 
 
    alert("width = " + windowWidth+" " +" height = "+ windowHeight); 
 
\t 
 
}, false);