469,330 Members | 1,289 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,330 developers. It's quick & easy.

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

ilya Kraft
134 100+
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
Attached Images
File Type: jpg Text_break_example.jpg (91.2 KB, 7215 views)
May 2 '11 #1
11 30628
Rabbit
12,516 Expert Mod 8TB
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.
May 2 '11 #2
ilya Kraft
134 100+
Yeh, I kind of know the logic of it, my problem is in code. Here is what I have got so far:

Expand|Select|Wrap|Line Numbers
  1. $sql_text = mysql_query("SELECT * FROM memberPosts WHERE id='$id'");
  2. $text = $row["text_body"];
  3.  
  4. $textdisplaylist = '<div>'.$text.'<br><a href="#">Read More</a></div>';
  5.  
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
May 2 '11 #3
daonho
18
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>';
}
May 2 '11 #4
ilya Kraft
134 100+
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
May 2 '11 #5
Rabbit
12,516 Expert Mod 8TB
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"
May 2 '11 #6
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
May 2 '11 #7
Rabbit
12,516 Expert Mod 8TB
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.
May 3 '11 #8
ilya Kraft
134 100+
I found A solution for this.


First you want to setup the basic structure of your content so that you can enable this functionality.
Expand|Select|Wrap|Line Numbers
  1. <div class="more-less">
  2.     <div class="more-block">
  3.         <p>The Content</p>
  4.     </div>
  5. </div>
  6.  
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.

Expand|Select|Wrap|Line Numbers
  1. $(function(){
  2.  
  3. // The height of the content block when it's not expanded
  4. var adjustheight = 80;
  5. // The "more" link text
  6. var moreText = "+  More";
  7. // The "less" link text
  8. var lessText = "- Less";
  9.  
  10. // Sets the .more-block div to the specified height and hides any content that overflows
  11. $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
  12.  
  13. // The section added to the bottom of the "more-less" div
  14. $(".more-less").append('
  15. […]
  16.  
  17. ');
  18. // Set the "More" text
  19. $("a.adjust").text(moreText);
  20.  
  21. $(".adjust").toggle(function() {
  22.         $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
  23.         // Hide the [...] when expanded
  24.         $(this).parents("div:first").find("p.continued").css('display', 'none');
  25.         $(this).text(lessText);
  26.     }, function() {
  27.         $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
  28.         $(this).parents("div:first").find("p.continued").css('display', 'block');
  29.         $(this).text(moreText);
  30. });
  31. });
  32.  
May 3 '11 #9
$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
Mar 15 '12 #10
@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.
Apr 7 '12 #11
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. $(document).ready(function(){
  4.  
  5.     $('#read').click(function() {
  6.         $('#req').show()
  7.         $('#read').hide()    
  8.  
  9.  
  10.     })
  11.     $('#unread').click(function() {
  12.         $('#req').hide();
  13.         $('#read').show();
  14.  
  15.     })
  16.  
  17. });
  18.  
  19.  
  20. </script>
  21.  
  22.  
  23.  
  24. //html code
  25.  
  26.  
  27.  
  28.  
  29. <div class="text-block">
  30.                             <p>content......prewious <a href="javascript:void(0)" id="read" onClick="showDiv();">Read More &gt;</a></p>
  31.  
  32. <p style="display:none;" id="req">content all.<br> 
  33.  
  34. <a href="javascript:void(0)" id="unread" onClick="showDiv();">Close&gt;</a>
  35.  </p>
  36.                         </div>
Feb 26 '14 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by PeteCresswell | last post: by
3 posts views Thread by Stinky Pete | last post: by
1 post views Thread by ascll | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Purva khokhar | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.