Results 1 to 2 of 2

Thread: text "expanding" script

  1. #1
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default text "expanding" script

    I am looking for a script to display the first line of several testimonials.
    I would like the user to be able to click on the first line of a testimonial and the complete testimonial would appear.
    Same for the rest of the testimonials. I do not want to display the complete testimonials because there are quite a few and would like the page to be simple unless the user clicks on a particular testimonial.
    Also, how would testimonial then "close" so only the main line would be showing after they read the testimonial.
    I have never worked with scripts before so please be patient .

    Thx

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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[*/
    .testimonial {
      position:relative;width:200px;height:20px;background-Color:#99FFFF;border-Top:solid black 1px;
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/down[1].gif);
      background-Repeat:no-repeat;background-Position:right top;
    }
    
    
    .active {
      background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/up[1].gif);
    }
    
    .text {
      position:relative;width:200px;background-Color:#99FFFF;
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcToggle(cls,acls,tcls,lst){
     var ts=zxcByClassName(cls);
     var txts=zxcByClassName(tcls);
     this.ary=[]
     for (var z0=0;z0<ts.length;z0++){
      if (ts[z0]&&txts[z0]){
       this.ary[z0]=[ts[z0],txts[z0],0,txts[z0].scrollHeight,true];
       txts[z0].style.overflow='hidden';
       txts[z0].style.height='0px';
       this.addevt(ts[z0],'click','Toggle',z0);
      }
     }
     this.cls=[cls,acls?cls+' '+acls:cls];
     this.lst=lst;
     this.nu=0;
    }
    
    zxcToggle.prototype.Toggle=function(nu){
     if (this.lst&&this.nu!=nu){
      this.ary[this.nu][0].className=this.cls[0];
      this.ary[this.nu][1].style.height=this.ary[this.nu][2]+'px';
      this.ary[this.nu][1].style.visibility='hidden';
      this.ary[this.nu][4]=true;
     }
     if (this.ary[nu]){
      this.ary[nu][0].className=this.cls[this.ary[nu][3]?1:0];
      this.ary[nu][1].style.height=this.ary[nu][this.ary[nu][4]?3:2]+'px';
      this.ary[nu][1].style.visibility=this.ary[nu][4]?'visible':'hidden';
      this.ary[nu][4]=!this.ary[nu][4];
      this.nu=nu
     }
    }
    
    
    zxcToggle.prototype.addevt=function(o,t,f,p){
     var oop=this;
     if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
     else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     else {
      var prev=o['on'+t];
      if (prev) o['on'+t]=function(e){ prev(e); oop[f](p,e); };
      else o['on'+t]=o[f];
     }
    }
    
    function zxcSVInt(obj,par){
     if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
     return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
    }
    
    
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    <div class="testimonial" >
     Testimonial 1
    </div>
    <div class="text" >
     I am looking for a script to display the first line of several testimonials.
     I would like the user to be able to click on the first line of a testimonial and the complete testimonial would appear.
     Same for the rest of the testimonials. I do not want to display the complete testimonials because there are quite a few and would like the page to be simple unless the user clicks on a particular testimonial.
     Also, how would testimonial then "close" so only the main line would be showing after they read the testimonial.
     I have never worked with scripts before so please be patient .
    </div>
    
    <div class="testimonial" >
     Testimonial 2
    </div>
    <div class="text" style="width:500px;">
     new zxcToggle('testimonial','active','text',true);<br />
     parameter 0 = the class name of the element to activate toggle (string)<br />
     parameter 1 = the class name of the element to activate toggle active state (string)<br />
     parameter 2 = the class name of the element to containing the text (string)<br />
     parameter 2 = true = leave only one text element open              (boolean)<br />
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
     new zxcToggle('testimonial','active','text',true);
    /*]]>*/
    </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
  •