?
Solved

Truncating HTML text with javascript - need help to collapse after expanding

Posted on 2009-02-19
6
Medium Priority
?
892 Views
Last Modified: 2012-08-13
I am using javascript to truncate a block of text and then adding an ellipsis at the end to expand for full text view.  I was wondering if someone can help me on how I can modify the script so that I can add in a "close" link at the end of the paragraph once it is extended.

Thanks for any help you can provide.
0
Comment
Question by:dukiejc99
  • 3
  • 3
6 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 23689660
Hi dukiejc99,
Ok, try this. You can change to close link if you not using image icon to expand/collapse the text based on given.

<head>
<script>

var strMaxLength=30;
var strMoreSource="images/more.jpg";
var strMinusSource="images/min.jpg";
var strMore=' ...';
var strOriginalText;

function truncateText(){
  var objShowMore=document.getElementById('imgMy');
  var objCurrentText=document.getElementById('divMy');
 
  if(objCurrentText.innerHTML.toString().length-strMore.length>strMaxLength){
     objCurrentText.innerHTML=strOriginalText.substr(0,strMaxLength-1) + strMore;
     objShowMore.style.display='block';
     objShowMore.src=strMoreSource;
  }else{
     if(strOriginalText.length>strMaxLength){
      objCurrentText.innerHTML=strOriginalText;
        objShowMore.style.display='block';
        objShowMore.src=strMinusSource;
     }else{
           objShowMore.style.display='none';
     }      
  }

}

function loadInit(){
  strOriginalText=document.getElementById('divMy').innerHTML.toString();
}

window.onload=function(){loadInit();truncateText();}
</script>
</head>
<body>
<form>
<div id="divMy">
I am using javascript to truncate a block of text and then adding an ellipsis at the end to expand for full text view.  I was wondering if someone can help me on how I can modify the script so that I can add in a "close" link at the end of the paragraph once it is extended.
</div><img src='images/more.jpg' id='imgMy' style="display:none" onClick="truncateText();"/>
</form>
</body>

0
 

Author Comment

by:dukiejc99
ID: 23691952
Hi x_com,
Thanks for your suggestion.  I'd rather not have to use images to expand and collapse the text.  How can I change it to having a link for "more" and then showing a link for "close"?
dukiejc99
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 23707869
Hi dukiejc99,
It's looking almost same using my previous posted code.

<head>
<style>
.lnkMe{
	text-decoration: none;
	color: #FF0000;
	font-family: "Tahoma";
	font-weight: normal;
	font-size: 11px;	
        cursor:pointer;
}
</style>
<script>
 
var strMaxLength=30;
var strMoreSource="more";
var strMinusSource="close";
var strMore=' ...';
var strOriginalText;
 
function truncateText(){
  var objShowMore=document.getElementById('lnkMy');
  var objCurrentText=document.getElementById('divMy');
  
  if(objCurrentText.innerHTML.toString().length-strMore.length>strMaxLength){
     objCurrentText.innerHTML=strOriginalText.substr(0,strMaxLength-1) + strMore;
     objShowMore.style.display='block';
     objShowMore.innerHTML=strMoreSource;
  }else{
     if(strOriginalText.length>strMaxLength){
      objCurrentText.innerHTML=strOriginalText;
        objShowMore.style.display='block';
        objShowMore.innerHTML=strMinusSource;
     }else{
           objShowMore.style.display='none';
     }      
  }
 
}
 
function loadInit(){
  strOriginalText=document.getElementById('divMy').innerHTML.toString();
}
 
window.onload=function(){loadInit();truncateText();}
</script>
</head>
<body>
<form>
<div id="divMy">
I am using javascript to truncate a block of text and then adding an ellipsis at the end to expand for full text view.  I was wondering if someone can help 
 
me on how I can modify the script so that I can add in a "close" link at the end of the paragraph once it is extended.
</div>
<a id="lnkMy" style="display:none" onClick="truncateText();" class="lnkMe"></a>
</form>
</body>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dukiejc99
ID: 23713017
Hi x_com,
This is great help.  Just one minor thing if you can help me out with.  How can I put the "more" link to appear at the end of the truncated text as opposed to being on the next line?  I would remove the ellipsis and just have the more link right at the end of the text.  I don't have the space in my table to have it on the next line.  

I really appreciate the help and apologize for not being able to sort this out myself.
thanks
dukiejc99
0
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 1000 total points
ID: 23729680
Hi dukiejc99,
The idea is expanded from the previous posted solution too. But, i've put the "more" link as dynamic created object instead. Here i attached the complete and the cleanest solution that required. You can take it as a starter for your solution.
<html>
<head>
<style>
.lnkMe{
	text-decoration: underline;
	color: #FF0000;
	font-family: "Tahoma";
	font-weight: normal;
	font-size: 11px;
        cursor:pointer;
}
</style>
<script>
 
/**** customise init value ****/
var strMaxLength=50; //maximum characters
var strMoreSource="more"; // display text for hyperlink if the text is collapsed
var strMinusSource="close"; // display text for hyperlink if the text is expanded
var strMore=' ...'; // additional display text for hyperlink if the text length exceed maximum defined characters
var strOriginalText; // Original displaying text
var strLinkID="lnkMy";//hyperlink ID
var strLinkCSS="lnkMe"; //hyperlink CSS
var strMyDivID="divMy"; //Display DIV ID
var strClickToViewMoreToolTips="Click to view more text";
var strClickToCollapseToolTips="Close expanded text";
/**** end init value ****/
 
function truncateText(){
  //create dynamic hyperlink for expand/collapse the text
  var objCurrentText=document.getElementById(strMyDivID);
  var objShowMore=document.createElement("a");
 
  objShowMore.id=strLinkID;
  objShowMore.innerHTML=strMoreSource;
  objShowMore.className=strLinkCSS;
  objShowMore.onclick=function(){
    truncateText();
  };
 
  try{
   var objFind;
   objFind=document.getElementById(strLinkID);
 
   if(objFind!=null)
 	objCurrentText.removeChild(objFind);
 
  }catch(e){}
 
  if(objCurrentText.innerHTML.toString().length-strMore.length>strMaxLength){
     objCurrentText.innerHTML=strOriginalText.substr(0,strMaxLength-1) + strMore;
     objCurrentText.title=strOriginalText;
     objShowMore.innerHTML=strMoreSource;
     objShowMore.title=strClickToViewMoreToolTips;
     objCurrentText.appendChild(objShowMore);
  }else{
     if(strOriginalText.length>strMaxLength){
        objCurrentText.innerHTML=strOriginalText;
        objShowMore.innerHTML=strMinusSource;
        objShowMore.title=strClickToCollapseToolTips;
        objCurrentText.title='';
        objCurrentText.appendChild(objShowMore);
     }
  }
}
 
function loadInit(){
  strOriginalText=document.getElementById(strMyDivID).innerHTML.toString();
}
 
window.onload=function(){loadInit();truncateText();}
</script>
</head>
<body>
<form>
<div id="divMy">
I am using javascript to truncate a block of text and then adding an ellipsis at the end to expand for full text view.  I was wondering if someone can help
me on how I can modify the script so that I can add in a "close" link at the end of the paragraph once it is extended.
</div>
</form>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:dukiejc99
ID: 31549028
x_com, Thanks so much for your help on this.

-dukiejc99
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

862 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