javascript show some content & click link to show the rest

**city_coder** · 04-22-2010, 09:41 PM

hi guys,

i know this has been on here before but i just cant seem to find anything, or know what to search for.

Everyone has seen it, i just want pointing in the right direction.

Just a bit of js that will check to see how many words are in a div that is being populated from a db, analyse if it is longer than it should be (ie by height of the div or by max number of words) and create a little '[...]' link that will slide down the rest of the text.

I also remember seeing somewhere, years ago, that the js had the ability to see if the amount only went over by a few words, then it would just show them instead of bothering with hiding them & providing a link to show them.

So just a link or 2 just to point me in the right direction please guys, or if your feeling particularly helpful then some code would be great

cheers

**vwphillips** · 04-23-2010, 11:26 AM

you could play with this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
   overflow:hidden;width:200px;height:100px;border:solid black 1px;
}

#tst1 {
   overflow:hidden;width:200px;height:100px;border:solid black 1px;
}
/*]]>*/
</style></head>

<body>
<div id="tst" >
Word0 Word1  Word2  Word3  Word4  Word5  Word6  Word7 Word8 Word9
Word10 Word11  Word12  Word13  Word14  Word15  Word16  Word17 Word18 Word19
Word20 Word21  Word22  Word23  Word24  Word25  Word26  Word27 Word28 Word29
</div>
<div id="tst1" >
Word0 Word1  Word2  Word3  Word4  Word5  Word6  Word7 Word8 Word9
Word10 Word11  Word12  Word13  Word14  Word15  Word16  Word17 Word18 Word19
Word20 Word21  Word22  Word23  Word24  Word25  Word26  Word27 Word28 Word29
</div>

<script type="text/javascript">
/*<![CDATA[*/

function Text(id,height){
 var obj=document.getElementById(id);
 var html=obj.innerHTML.split('');
 obj.innerHTML='';
 var div=document.createElement('DIV');
 obj.appendChild(div);
 var a=document.createElement('A');
 a.appendChild(document.createTextNode(' more'));
 a.href='#';
 for (var z0=0;z0<html.length;z0++){
  div.appendChild(document.createTextNode(html[z0]));
  if (div.offsetHeight>height){
   div.appendChild(a);
   break;
  }
 }
 var div=document.createElement('DIV');
 obj.appendChild(div);
 for (var z1=z0;z1<html.length;z1++){
  div.appendChild(document.createTextNode(html[z1]));
 }
 div.style.visibility='hidden';
 this.mm=[obj.offsetHeight,div.offsetHeight+obj.offsetHeight];
 var oop=this;
 a.onmouseup=function(){
  if (div.style.visibility=='hidden'){
   obj.style.height=oop.mm[1]+'px';
   div.style.visibility='visible';
   a.firstChild.data=' less';
  }
  else {
   obj.style.height=oop.mm[0]+'px';
   div.style.visibility='hidden';
   a.firstChild.data=' more';
  }
  return false;
 }
}

Text('tst',60);
Text('tst1',80);

/*]]>*/
</script>

</body>

</html>

Thread: javascript show some content & click link to show the rest

Thread Tools

Search Thread

javascript show some content & click link to show the rest

Bookmarks

Bookmarks

Posting Permissions