jQuery Text Read More | Lessoncup Programming Blog

Saturday, 22 March 2014

jQuery Text Read More

Hi, today i am going to tell you about how to split the text paragraph with jquery, this feature is most useful were large content to be display in your websites and social networking sites, like we have seen many sites at end the of the paragraph we seen read more button when we click on we got full length of hidden text, i have developed same kind if app, let's see how to do this and integrate in your websites


HTML

take one div and give a ID name textbox inside the DIV take a P tag and give a class name text inside the tag place some big length of text.
<div id="textbox"> 
<p class="text">
Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 

Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</p>
</div>


CSS

<style>

#textbox{ width:400px; height:auto; border:solid #999 10px; padding:10px; margin:0 auto; margin-top:200px; background-color:#FFF;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666; color:#66F; font-size:14px; line-height:2;}

.links{color:#F60; font-weight:bold;text-decoration:none;}

</style>

JAVASCRIPT

here write the function with two parameters  i named it like breakWords() now the first step is we need to split the text with a special character space between the words by using split() method and take one more variable named like newText and assign a empty string

now write the for loop  to get the length of full text, inside the loop write the condition to if(i<= showtext) inside the condition assign the words[i] result to newText, in else if the i value equals to showtext add the span tag to newText and words[i] value ==null assign the a link tag to newText

now write the each function to text class and assign the breakWords() function to text class by using html() method and give words limit and hide the span elements by using children() method

now write the click function to text class to hide and show the text
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 function breakWords(paragraph, showtext){
  
  
  var words = paragraph.split(' ');
  
  var newText = '';
  
  for(i=0; i<words.length; i++){
   
   
   if(i<= showtext){
    
    newText += words[i] + ' ';
    
   }else {
    
    if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';  

    newText += words[i] + ' ';
   
    if (words[i+1] == null) newText += '</span><a href="#" class="links"> &raquo; read more</a>';
    
   }
   
  }
  
  return newText;
  
 }
 
 
 $('.text').each(function () {
  
   $(this).html(breakWords($(this).html(), 50));
  
   $(this).children('span').hide();
  

  }).click(function () {


   var fulltext = $(this).children('span.fulltext');
   var links = $(this).children('a.links');
    

   if (fulltext.hasClass('hide')) {
    
    fulltext.show(200);
    links.html(' &raquo; hide');  
    fulltext.removeClass('hide');
    
   } else {
    
    fulltext.fadeOut(100);
    links.html(' &laquo; read more');   
    fulltext.addClass('hide');
    
   }

   return false;
  
  });
 
});

</script>

Live Demo   Download Script

1 comment :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons