Announcement

Collapse
No announcement yet.

toggle category text??

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • toggle category text??

    Is there anybody knows how to reduce the length of category header text and append a "read more" link on all category headers when using mobile view only.

  • You could use a combination of CSS, where you would set a maximum height on the containing element and hide any overflow, and JavaScript to detect if there is overflow and toggle the height of the element.
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Code:
      <div id="my-element" style="max-width: 333px; overflow: hidden;">this is my long text: asdkjahskdja hsdkljas dhlkjas dhlslaa skl hakjas dhak djhakjs dhkjasdh hs</div>
      everything over 333px of width will be hidden

      Code:
      @media screen and (max-width: 640px) {
          #my-element::after {
              content: ' Read more...';
          }
      }
      on screens below 640px there will be a "Read more..." added to the div above

      Comment


      • thanks for the reply..gonna try this out.

        Comment


        • if you need height not width, change 'max-width' to 'max-height'

          you would also need a trigger to remove the max-height when an element is clicked, like:
          $(document).ready(function() { $("#my-element").click(function() { $(#my-element").css("max-height:none"); }); }); (Note: you'd need to put the inline styles Iherb used in a class statement.)
          (Also Note: written, not tested...)
          Bruce Golub
          Phosphor Media - "Your Success is our Business"

          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
          phosphormedia.com

          Comment

          Working...
          X

          This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

          This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

          Accept