How to break text from database and have "Read More" button?

[ilya Kraft]

Hello,

I came over this problem.
I'll try to make it as simple as I can.
Say there is a page called submit-article.php where users enter their text in the field. It goes in database and so on...
Than I display it in div on index.php page. How can I limit text that displays on index.php page to 200 characters? And than have a "Read More button" < When clicked expands div to show all text.
I will attach image that shows what I mean.

Thank You

[Rabbit]

You could store it in a variable and then display only the first 200 characters. Then, when they click the button to see more, it just replaces what's in the div with the full text.

[ilya Kraft]

Yeh, I kind of know the logic of it, my problem is in code. Here is what I have got so far:

$sql_text = mysql_query("SELECT * FROM memberPosts WHERE id='$id'");
$text = $row["text_body"];
 
$textdisplaylist = '<div>'.$text.'<br><a href="#">Read More</a></div>';
 

My question is, how to limit text to 200, than how to expan div when Read More is clicked, than How to insert full text instead of mini text. Quiet a lot of questions huh ;) But this are the parts I cant understand.

Thank You

[daonho]

if(strlen($text) > 200)
{
$textdisplaylist = '<div>'.substr($text,0,200).'<br><a href="#">Read More</a></div>';
}
else
{
//no point of having read more button here cuz there nothing more to read :)
$textdisplaylist = '<div>'.$text.'</div>';
}

[ilya Kraft]

This shows how to limit it to 200 characters right?
What is that strlen function?
But this just limits text to 200 right?
What I meant was. Say I have 500 char text, I want to show first 200 characters of it on the first page, but when someone clicks Read More button it expands down and shows all text, like on this image here

http://bytes.com/attachments/attachm...ak_example.jpg

[Rabbit]

The strlen function tells you how many characters are in a string.

What you need to do is write it into the javascript of the page. You'll also need an onclick function on the read more that will a) put in the rest of the text and b) hide the "read more" or toggle it to "show less"

[sudip1985]

why are you processing it in php??
use Mysql function for that(I dont remember d function name but there is a one..guranteed..plz google it)
and when user click Read more, then retrieve d whole field data

[Rabbit]

You can't just use JavaScript for it. At some point you're going to need a server side script to retrieve the actual value. Which is what they're doing.

[ilya Kraft]

I found A solution for this.


First you want to setup the basic structure of your content so that you can enable this functionality.

<div class="more-less">
    <div class="more-block">
        <p>The Content</p>
    </div>
</div>
 

Anything that you place into the “more-block” div will be expandable. The “more-less” div is needed to hold the More/Less link and the [...], which is added using the jQuery, saving you the time of adding those small parts.

For explanation of the jQuery, view the comments throughout the code below.

$(function(){
 
// The height of the content block when it's not expanded
var adjustheight = 80;
// The "more" link text
var moreText = "+  More";
// The "less" link text
var lessText = "- Less";
 
// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
 
// The section added to the bottom of the "more-less" div
$(".more-less").append('
[…]
 
');
// Set the "More" text
$("a.adjust").text(moreText);
 
$(".adjust").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
});
});
 

[shamizai]

$sql_text = mysql_query("SELECT * FROM memberPosts WHERE id='$id'");
$row=mysql_fetch_array($sql)
$text = $row["text_body"];
<?php echo substr($text,0,200);?><a href="#"?id=<?php echo $row['id']?>>Read More</a>

check this one

[sudip1985]

@ilya Kraft.......If you use javascript to show more or less text, then that will be time consuming. Bcz with javascript solution you are rendering the whole document.

As I told in one of my earlier posts, why dont use use MySql string function to retreive only 200 or 300 characters? When user clicks "Read More", then retreive the whole document.

[annubhav]

<script type="text/javascript">
 
$(document).ready(function(){
 
    $('#read').click(function() {
        $('#req').show()
        $('#read').hide()    
 
 
    })
    $('#unread').click(function() {
        $('#req').hide();
        $('#read').show();
 
    })
 
});
 
 
</script>
 
 
 
//html code
 
 
 
 
<div class="text-block">
                            <p>content......prewious <a href="javascript:void(0)" id="read" onClick="showDiv();">Read More &gt;</a></p>
 
<p style="display:none;" id="req">content all.<br> 
 
<a href="javascript:void(0)" id="unread" onClick="showDiv();">Close&gt;</a>
 </p>
                        </div>