Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

show hide text (first 90 words) with read more link

Posted on 2009-07-07
11
Medium Priority
?
506 Views
Last Modified: 2012-05-07
Trying to find the easiest solution to implementing a read more link that would read the first 90 or so words from a string and truncate it by appending a "...more" link. upon clicking the link the remainder of the text would be revealed. I know that it is done with hide and show divs but how can I get it to only show example 90 words or a certain amount of characters?

your help is appreciated.  
thanks in advance.
0
Comment
Question by:jriver12
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 24800464
0
 
LVL 17

Expert Comment

by:selvol
ID: 24802741
Yes that on is set at 100 chars.
Here's 90 word (90 words @ 3 letters) 270 . But you knew that.
 

<!--  http://www.barelyfitz.com/projects/truncate/ --><html>
<head>
<p id="truncateMe">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit
amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus
mauris quis massa. Integer porttitor, mi sit amet viverra faucibus,
urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros,
convallis sed, varius ac, commodo et, magna. Proin vel
risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar,
nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam
urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam
id tellus. Sed pharetra enim non nisl.</p>
 
<script type="text/javascript">
 
var len = 270;
var p = document.getElementById('truncateMe');
if (p) {
 
  var trunc = p.innerHTML;
  if (trunc.length > len) {
 
    /* Truncate the content of the P, then go back to the end of the
       previous word to ensure that we don't truncate in the middle of
       a word */
    trunc = trunc.substring(0, len);
    trunc = trunc.replace(/\w+$/, '');
 
    /* Add an ellipses to the end and make it a link that expands
       the paragraph back to its original size */
    trunc += '<a href="#" ' +
      'onclick="this.parentNode.innerHTML=' +
      'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
      '...<\/a>';
    p.innerHTML = trunc;
  }
}
 
</script>
 
 
</body>
</html>

Open in new window

0
 

Author Comment

by:jriver12
ID: 24802950
selvol:
Awesome!  one quick question.  is there a way to minimize it again?
0
Quick Cloud Training

Looking for some quick training on the cloud in 2 hours or less? Check out these how-to guides in AWS, Linux, OpenStack, Azure, and more!

 

Author Comment

by:jriver12
ID: 24803132
selvol:
Did a bit more testing:  the script works great for one <p> using the id=truccateme, however we have multiple <p>  that we would like to truncate.  we are trying to use this fuctionality in our FAQ  whereby when we show the question and only a certain amount of the answer  until the click the ....  any suggestions?
0
 
LVL 17

Expert Comment

by:selvol
ID: 24803305
Sure 2 mins,
 
 
0
 
LVL 17

Accepted Solution

by:
selvol earned 2000 total points
ID: 24803394
You can always fall back on on toggle..
 
I'll check out the multi <p>'s on a page.
a few mins.
 
Selvol

<script type="text/javascript">
function toggleContent() {
  var contentId = document.getElementById("content");
  contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
   <td class="info">BROWN</td>
   </tr>
    </table>
     </td>
      </tr>
       </table>
        </tr>
         </table>      <tr>
            <table width="433">
             <tr class="charge_info">
      <td><div ID="content" style="display:block;"><p id="t">
               In Custody For:<br>
	MISDEMEANOR  ASSAULT INTENT RECKLESS INJURE<br>
	MISDEMEANOR  DISORDERLY CONDUCT-FIGHTING   <br>
     </td></p>
      </tr>
       </table>
 
 
<button style="background-color: #ffffff;font: 6;border: 0;" onclick="toggleContent()">Toggle</button>
 
 
 
  </table><br>
<h1 id="newTitle">JON, RUDY DOE</h1>#P543238</td>
	<table  width="400" border="0">
<tr class="inmate_info">
	<td colspan="2">Date: May -14-2009</td>
 
<script type="text/javascript"> 
var len = 21;
var p = document.getElementById('t');
if (p) { 
  var trunc = p.innerHTML;
  if (trunc.length > len) { 
    trunc = trunc.substring(0, len);
    trunc = trunc.replace(/\w+$/, ''); 
    /* Add an ellipses to the end and make it a link that expands
       the paragraph back to its original size */
    trunc += '<a href="#" ' +
      'onclick="this.parentNode.innerHTML=' +
      'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
      'Click to see<\/a>';
    p.innerHTML = trunc;
  }
} 
</script>

Open in new window

0
 
LVL 17

Expert Comment

by:selvol
ID: 24803603
Apologies, I have to return some time later? have you looked at http://jqueryui.com/ before?
 
Super stuff......
Selvol
0
 

Author Comment

by:jriver12
ID: 24803727
yes.  I will relook though.
0
 
LVL 17

Expert Comment

by:selvol
ID: 24876989

Did you ever solve this?.
 
Selvol
0
 

Author Comment

by:jriver12
ID: 24959830
selvol, no I have not. sorry in the delay at getting back but I was out of town.
0
 

Author Closing Comment

by:jriver12
ID: 31600919
thanks.
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question