WordPress.org

Forums

Petfinder Listings
[resolved] Widget Question (8 posts)

  1. greginky
    Member
    Posted 1 year ago #

    When I use the widget I know that I can limit the number of characters seen but is there a way to add a "more" link at the end of that so that users can click and expand to see the rest of the listing. Some of my listings are too long and extend the length of my page and to me it is visually unappealing.

    https://wordpress.org/plugins/petfinder-listings/

  2. rawrzors
    Member
    Posted 1 year ago #

    Can you post a link to the page and any additional details? I can take a look when I have some free time, but at a glance, it will require some jQuery.

  3. greginky
    Member
    Posted 1 year ago #

    http://www.bgsdr.com/

    In the left sidebar on each page is the widget, showing random animals each time you either refresh or change pages. The text is too long and to me is visually unappealing. I know how to set it to a specific number of characters using the widget but I would like to do so and have a "more link" at the end of my specified number of characters in order show the remainder of the text associated with each picture. To me this would be much more visually pleasing. If it is too hard with me having random animals then I can set it to a single animal if that is the easiest way of doing it.

  4. rawrzors
    Member
    Posted 1 year ago #

    Include the following script...

    If you do not know how to do it the "right" way, you can go to Admin->Appearance->Editor->header.php

    Copy & paste the below so that it is contained within the <head> tag. Be sure you do not include it within any <?php ?> tags. Any upgrades to the theme will potentially delete the code.

    You can change 500 to whatever number of characters you want to check for. Be sure to change the substring values too.

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function () {
            if ($("#featured_pet p").text().length > 500) {
    
                var more = $("#featured_pet p").text().substring(100);
    
                $("#featured_pet p").text($("#featured_pet p").text().substring(0, 100));
                $("#featured_pet p").append("<div id=\"moreinfo\" style=\"display:none\">" + more + "</div>");
                $("#featured_pet p").append("<a href=\"\" id=\"more\">more...</a>");
            }
    
            $("#more").click(function (event) {
                event.preventDefault();
                $("#moreinfo").slideToggle();
                $("#more").hide();
            });
        });
    </script>
  5. greginky
    Member
    Posted 1 year ago #

    YOU ARE AWESOME, IT WORKED PERFECTLY!!!!! THANK YOU SO MUCH

  6. greginky
    Member
    Posted 1 year ago #

    Hi rawrzors, I wonder if maybe you can help me on another topic since I have gotten no replies.

    http://wordpress.org/support/topic/char-set

  7. rawrzors
    Member
    Posted 1 year ago #

    Please post a link / screenshot of the issue on that topic. It will usually make people more willing to help you.

  8. greginky
    Member
    Posted 1 year ago #

    no message

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Petfinder Listings
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.