WordPress.org

Support

Support » Plugins and Hacks » Petfinder Listings » [Resolved] Widget Question

[Resolved] Widget Question

  • 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/

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.

    Home

    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.

    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>

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

    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

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

    no message

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Widget Question’ is closed to new replies.
Skip to toolbar