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