Results 1 to 2 of 2

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

  1. #1
    Join Date
    Feb 2008
    Location
    Coventry
    Posts
    103
    Thanks
    5
    Thanked 8 Times in 8 Posts

    Question javascript show some content & click link to show the rest

    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
    The important thing is not to stop questioning. Curiosity has its own reason for existing.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •