0

Hey everyone,

I'm just wondering how the read more feature is achieved in PHP. It is like facebook where it displays a couple of lines then if you're interested in reading more about the status or article click 'read more link' which expands the box.

Cheers,

Edited by pritaeas: Moved to Js

3
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by JorgeM
0

There are two options (Javasccript, not really PHP).

  1. Simplest: the full text is already in a div, but hidden, and clicking the link will just display that div.

  2. Clicking the link does an AJAX call to a server side script to get the full article, and replaces what's already there.

0

Is that an easy job? I mean a function or two in jquery becuase I'm designing the app for smart devices.

Edited by rotten69

0

I get the second step. For the first one though, how could you determine the number of lines to display? is there an example you can refer me to?

Edited by rotten69

0

Here is an example of a "Read More/Less" feature using jQuery.

<p id="mytext" style="width:260px;height:200px;overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</p>
<a href="#" id="readml">Read More</a>

<script type="text/javascript">
    $(document).ready(function () {
        var less = 200;
        var h = $('#mytext')[0].scrollHeight;
        $("#readml").toggle(function () {
            $('#mytext').animate({ height: h }, "slow");
            $(this).text("Read less");
        }, function () {
            $('#mytext').animate({ height: less }, "slow");
            $(this).text("Read More");
        });
    });
</script>

Edited by JorgeM

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.