javascript show some content & click link to show the rest [Archive]

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 :D

cheers

vwphillips

04-23-2010, 11:26 AM

you could play with this

<!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>