WordPress.org

Ready to get started?Download WordPress

Forums

Petfinder Listings
[resolved] Widget Question (8 posts)

  1. greginky
    Member
    Posted 6 months 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 5 months 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 5 months 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 5 months 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 5 months ago #

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

  6. greginky
    Member
    Posted 5 months 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 5 months 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 5 months ago #

    no message

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.