Window size and excerpt length

I am very new about jQuery. My question is

When I resized the window size, my excerpt length is show properly, but when I expanded the window, the excerpt not change to the default length. For example, the default window size, my excerpt length is 165. When I resized the window, it changed to 105. But when I expand again. It still shows at 105. It could be 165. This is my code.

 function windowSize()
    {
        windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
        windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
 }
 windowSize();
 $(window).resize(function ()
 {
      windowSize();
      var str = $(".active .carousel-excerpt").text();

   if (windowWidth <= 659)
   {
      $('.active .carousel-excerpt').text(str.substring(0, 100) + '.....');
   } else if (windowWidth >= 660)
   {
      $('.active .carousel-excerpt').text();
   }
 });

Answers 1

  • You are permanently changing the string value when you reduce the screen size. To keep the original string value add another div with style display:none and keep the original string value there.

    Then do the logical calculation when to show the excerpt.

    Live demo: https://jsfiddle.net/r4nboxp1/1/

    HTML:

     <div class="active">
     <div class="carousel-excerpt">
      When I resized the window size, my excerpt length is show properly, but when I expanded the window, the excerpt not change to the default length. For example, the default window size, my excerpt length is 165. When I resized the window, it changed to 105. But when I expand again. It still shows at 105. It could be 165. This is my code.
    </div>
    </div>
    <div style="display:none" id="originalText">
    </div>
    

    jQuery:

    var windowWidth;
     function windowSize()
        {
            windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
            windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
      }
     windowSize();
          var str = $(".active .carousel-excerpt").text();
          $("#originalText").text(str);
      $(window).resize(function ()
     {
     var originalText = $("#originalText").text();
       windowSize();
       if (windowWidth <= 400)
       {
          $('.active .carousel-excerpt').text(originalText.substring(0, 10) + '.....');
       } else if (windowWidth >= 201)
       {
          $('.active .carousel-excerpt').text(originalText);
       }
     });
    

Related Articles