Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What script could I use to do this?

    Is there a script that I can use that will show a section of summarized text and if the user would like to see the full paragraph they can click something and it expands the page to show the full article? If you know of a script I can use to accomplish this please post it here. Thanks for taking time to read this.

  • #2
    New Coder
    Join Date
    Apr 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    also I don't want a page refresh to be required

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Varient,

    something like this possibly...

    ...and here is the code...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>show/hide info</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    .container {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        margin:4px 0;
     }
    .container img {
        vertical-align:bottom;
     }
    .container span {
        font-weight:bold;
        cursor:pointer;
     }
    .off {
        display:none;
    }
    .on {
        display:block;
        margin:10px 30px;
        text-align:justify;
        color:#003;
        background-color:#eef;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload=function() {
    spn=document.getElementsByTagName('span');
    for(c=0;c<spn.length;c++) { 
    spn[c].onclick=function() {
    if(this.id!='') {
       stuff(this.id.split('s')[1]);
        }
       }
      }
     }
    function stuff(n) {
    
      dvs=document.getElementsByTagName('div');
      ims=document.getElementsByTagName('img');
      info=document.getElementById('div'+n);
      pic=document.getElementById('img'+n);
    
    for(c=0;c<dvs.length;c++) {
    if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) {
       dvs[c].className='off';
      }
     }
    for(c=0;c<ims.length;c++) {
       ims[c].src='images/plus.GIF';
     }
    if(info.className=='on') {
       info.className='off';
       pic.src='images/plus.GIF';
    }
    else {
       info.className='on';
       pic.src='images/minus.GIF';
      }
     }
    
    //-->
    </script>
    
    </head>
    <body>
    
    <div class="container">
    <img id="img0" src="images/plus.GIF" alt=""/>
    <span id="s0">John Smith</span>
    <div id="div0" class="off">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </div>
    </div>
    
    <div class="container">
    <img id="img1"  src="images/plus.GIF" alt=""/>
    <span id="s1">Frank Furter</span>
    <div id="div1" class="off">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </div>
    </div>
    
    <div class="container">
    <img id="img2"  src="images/plus.GIF" alt=""/>
    <span id="s2">Mary Contrary</span>
    <div id="div2" class="off">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </div>
    </div>
    
    <div class="container">
    <img id="img3"  src="images/plus.GIF" alt=""/>
    <span id="s3">Joe Bloggs</span>
    <div id="div3" class="off">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Change Width/Height Part 1 (31-July-2006)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk
    
    
    // An elements width or height may be progressively changed or toggled
    // to a new specified dimension at specified increments.
    // Options allow
    // the change to be linear or progressive,
    // the change to be Up, Down, Left, Right or Centered,
    // the element removed (display:none;) or  hidden (visibility:hidden) when at the minimum dimension.
    // the z-index changed when extending or retracting.
    //
    // Multiple effects may be defined for as many elements as required.
    //
    // Optional Code allows the effects of a group of elements to be controlled
    // for single or multiple level applications such as menus.
    
    
    // ***** Application Notes for Part 1 and Part 2
    
    
    // ***** Initialising the Effect
    //
    // The each effect would normally be initialised by a  <BODY> or window onload event call to function 'zxcWHSlide'.
    // There may be multiple calls to define a number of effects to different objects.
    // e.g.
    // zxcWHSlide('Tst1','WP',100,500);zxcWHSlide('Tst1','H',100,500);
    // where:
    // parameter 0 = the object to apply the effect or the unique ID name of the object. (string)
    // parameter 1 = a character string defining the effect options.                     (string)
    //                'W' = slide width
    //                'H' = slide height ('W' has priority over 'H').
    //                'R' = slide height up for H, slide width left.
    //                     (default, height = expand down, width = expand right).
    //                'C' = position center for width, position middle for height.
    //                'P' = progressive steps.
    //                'V' = visibility='hidden' at minimum width/height.
    //                'D' = display='none' at minimum width/height.
    //                'K' = for persistance(cookies) (see ***** Persistance).
    // parameter 2 =  the minimum width/height.                                          (digits)
    // parameter 3 =  the maximum width/height.                                          (digits)
    // parameter 4 = (optional) the number of steps in applying the effect(speed).       (digits, default = 50)
    //
    // Note:
    // The OOP for the effect is identified by a unique character string comprising of
    // the element ID name(parameter 0) and the option string(parameter 0).
    // There may be as many effects as required assigned to an element.
    //
    
    
    // ***** Executing the Effect
    //
    // Once initialised the effect can be called by an event call to 'zxcWHExecute'
    // e.g.
    // zxcWHExecute('Tst1WP');
    // where:
    // parameter 0 = the effect (the unique character string comprising of the element ID name and the option string). (string)
    // parameter 1 = (optional) if null, the default is to toggle expand/retract the width or height.
    //                digit > 0 expand the width or height.                                                            (digits +ve)
    //                digit < 0 reduce the width or height.                                                            (digits -ve)
    // parameter 2 = (optional) the zIndex of the object.                                                              (digits)
    //                if null, the default is variable 'zxcZIndex' + parameter 1
    //
    //
    
    // ***** Tables
    //
    // Changing the width/height of table <TR> elements
    // requires that the content of each <TD> is nested in a <DIV>
    // with a style, 'position:relative;' and 'overflow:hidden;'
    // Each <TD> must also be assigned a class name which includes the characters 'zxcWH'
    // e.g.
    //  <table cellpadding="0" cellspacing="0" border="1">
    //   <tr>
    //     <td width=100 onclick="zxcWHExecute('R1HPD');" >Show</td>
    //   </tr>
    //   <tr id="R1" style="display:none;" >
    //     <td>
    //      <div class="zxcWH" style="position:relative;overflow:hidden;height:100%;" >
    //       Show Content  Show Content Show Content Show Content Show Content Show Content
    //      </div>
    //     </td>
    //   </tr>
    //  </table>
    //
    
    
    // ***** Controlling a Group of Element Effects
    // Requires Optional Part 2 Code
    //
    // A group of element effect may be controlled by an event call to function 'zxcWHGroup'.
    // This may control single level requirements or multi level requirements such as menue.
    //
    
    // *** Single Level Requirements
    //
    // Each element effect in the group must be initialised, see ***** Initialising the Effect
    // The element to expand or contract the effect must be assigned an event call to function 'zxcWHGroup'
    // e.g.
    //  <div onclick="zxcWHGroup('Tst4HPV','Grp2');" style="width:100px;height:30px;background-color:red;">Link</div>
    //  <div id="Tst4" style="visibility:hidden;width:200px;height:0px;border:solid black 1px;background-color:red;" ></div>
    //  <div onclick="zxcWHGroup('Tst5HPV','Grp2');" style="width:100px;height:30px;background-color:blue;">Link</div>
    //  <div id="Tst5" style="position:relative;visibility:hidden;width:200px;height:0px;border:solid black 1px;background-color:blue;" ></div>
    // where:
    // parameter 0 = the effect (the unique character string comprising of the element ID name and the option string). (string)
    // parameter 1 = a unique string to identify the group.                                                            (string)
    // parameter 2 = null or omit.                                                                                     (null or omit)
    //
    
    // *** Multi Level Requirements
    //
    // Each element effect in the group must be initialised, see ***** Initialising the Effect
    // The element to expand or contract the effect must be assigned an event call to function 'zxcWHGroup'
    // The event type may be 'onmouseover' or 'onclick' but must be the same for all group event calls.
    // The Levels are considered to be from 0 to the maximum number of levels.
    // The top level element is considered to be level O, lower levels are assigned by the to function 'zxcWHGroup'
    // e.g.
    //  <div onmouseover="zxcWHGroup('Tst1HPD','Grp1',1);" style="width:100px;height:30px;background-color:red;">Level 0</div>
    //   <div id="Tst1" onmouseover="zxcWHGroup('Tst1-2HPD','Grp1',2);"  style="visibility:hidden;width:200px;height:0px;border:solid black 1px;background-color:red;" >Level 1</div>
    //    <div id="Tst1-2" onmouseover="zxcWHGroup(null,'Grp1',3);"  style="visibility:hidden;width:200px;height:0px;border:solid black 1px;background-color:green;" >Level 2</div>
    //  <div onmouseover="zxcWHGroup('Tst2HPD','Grp1',1);" style="width:100px;height:30px;background-color:blue;">Level 0</div>
    //   <div id="Tst2"  style="position:relative;visibility:hidden;width:200px;height:0px;border:solid black 1px;background-color:blue;" >Level 1</div>
    // where:
    // parameter 0 = the effect (the unique character string comprising of the element ID name and the option string).
    //               if there is no effect(for the highest level) use 'null'                                           (string or null)
    // parameter 1 = a unique string to identify the group.                                                            (string)
    // parameter 2 = the level to be assigned to the effect specified in parameter 0.                                  (digits)
    //
    // Extended element will retract
    // when activated by onmouseover:
    // onmouseout of an element if a mouseover event does not occur within 500 milliSeconds.
    // when activated by onclick:
    // an onclick event outside of an element if an element onclick event does not occur within 500 milliSeconds.
    //
    
    
    // ***** Persistance (Cookies)
    // Requires Optional Part 3 Code
    //
    // A cookie can remember the last width/height state of an single element or group of elements.
    // Elements within a group of elements should not have an individual cookie.
    //
    // **** Single Element Persistance
    //
    // The element initalisation call parameter 1 must include the character 'K'
    // The cookie is evaluated by a <BODY> or window onload event call to function 'zxcWHSingleCookie'
    // e.g.
    // <BODY onload="zxcWHSlide('Tst5','HPD',0,100,50);zxcWHSingleCookie('Tst5HPD');" >
    // where:
    // parameter 0 = the effect (the unique character string comprising of the element ID name and the option string). (string)
    // Note, this call must be after the element initialisation call to function 'zxcWHSlide'.
    //
    // **** Element Group Persistance
    //
    // The width/height states of all elements in a group may be stored in a cookie
    // The group name of the group must include the character string 'Cookie' ie 'Cookie3'.
    // The cookie is evaluated by a <BODY> or window onload event call to function 'zxcWHGroupCookie'
    // e.g.
    //  zxcWHGroupCookie('Cookie3');
    // where:
    // parameter 0 = the group name (string).
    // Note, this call must be after all elements in the group have been initialisated by a call to function 'zxcWHSlide'.
    //
    
    
    // ***** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These characters are easily changed to characters of choice using global find and replace.
    
    // The functional code Part 1 (about 3.5K), Part 2 (about 3K) and  Part 3 (about 1.75K) are best as an external JavaScript
    
    // Tested with IE6 and Mozilla FireFox
    
    
    // ***** Customising Variables
    
    var zxcZIndex=10;  // The default Z-INDEX of 'Slide' Objects if not assigned in the object INLINE code. (digits)
    var zxcWHDays=1/24/60; // The number of days to retain Cookies (persistance).                               (digits)
    
    
    
    // ***** Functional Code NO NEED to Change
    
    function zxcWHExecute(zxcid,zxcd,zxcz){
     var zxcoop=window[zxcid];
     if (!zxcoop){ return; }
     clearTimeout(zxcoop.to);
     zxcoop.obj.style.display='';
     zxcoop.obj.style.visibility='visible';
     zxcoop.d=zxcd||zxcoop.d;
     zxcoop.obj.style.zIndex=zxcz||zxcoop.zindex+zxcoop.d;
     if (zxcoop.cookie&&window['zxcWHSetCookie']){ zxcWHSetCookie(zxcid,zxcoop.d+','+zxcz); }
     zxcoop.cngwh();
    }
    
    function zxcWHSlide(zxcobj,zxcopt,zxcmin,zxcmax,zxcstps){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj){ return; }
     if (window[zxcobj.id+zxcopt]){ return; }
     if (zxcobj.tagName!='TR'){ zxcobj.style.overflow='hidden'; }
     window[zxcobj.id+zxcopt]=new zxcOOPWH(zxcobj,zxcopt,zxcmin,zxcmax,zxcstps);
    }
    
    function zxcOOPWH(zxcobj,zxcopt,zxcmin,zxcmax,zxcstps){
     this.obj=zxcobj;
     var zxcels=zxcobj.getElementsByTagName('DIV');
     for (var zxc0=0;zxc0<zxcels.length;zxc0++){
      var zxccn=zxcels[zxc0].className; if (zxccn.match('zxcWH')){ if (!this.ary){ this.ary=[]; }; this.ary.push(zxcels[zxc0]); }
     }
     this.opt=zxcopt;
     this.wh=this.opt.match('W')?['width','left']:['height','top'];
     this.cookie=this.opt.match('K')?true:false;
     this.zindex=parseInt(zxcobj.style.zIndex)||zxcZIndex;
     this.srt=true;
     this.d=1;
     this.cnt=0;
     this.stps=zxcstps||50;
     this.hide=[Math.min(zxcmin,zxcmax),Math.max(zxcmin,zxcmax)];
     this.steps=zxcSteps(this.opt.match('P'),this.stps,zxcmin,zxcmax)
     this.to=null;
     this.dly=document.all?20:10;
     this.ref='zxcwh'+zxcobj.id+zxcopt;
     window[this.ref]=this;
     this.wh[2]=this.opt.match('H')?zxcobj.offsetTop:zxcobj.offsetLeft;
    }
    
    zxcOOPWH.prototype.cngwh=function(){
     if ((this.d>0&&this.cnt+this.d<this.stps)||(this.d<0&&this.cnt+this.d>0)){
      this.obj.style[this.wh[0]]=(this.steps[this.cnt+=this.d])+'px';
      if (this.opt.match('R')){ this.obj.style[this.wh[1]]=(this.wh[2]-this.steps[this.cnt])+'px';
     }
      if (this.opt.match('C')){ this.obj.style[this.wh[1]]=(this.wh[2]-(this.steps[this.cnt])/2)+'px'; }
      if (this.ary){ this.cngwhary(); }
      this.setTimeOut('cngwh();',this.dly);
     }
     else {
      if (this.d<0){ this.obj.style[this.wh[0]]=this.steps[0]+'px'; }
      if (this.d>0){ this.obj.style[this.wh[0]]=this.steps[this.stps-1]+'px'; }
      if (this.ary){ this.cngwhary(); }
      if (parseInt(this.obj.style[this.wh[0]])==this.hide[0]){
       if (this.opt.match('D')){ this.obj.style.display='none'; }
       if (this.opt.match('V')){ this.obj.style[this.wh[0]]=(Math.max(parseInt(this.obj.style[this.wh[0]]),1))+'px';  this.obj.style.visibility='hidden'; }
      }
      this.d=-this.d;
     }
    }
    
    zxcOOPWH.prototype.cngwhary=function(){
     for (var zxc0=0;zxc0<this.ary.length;zxc0++){
      this.ary[zxc0].style[this.wh[0]]=this.obj.style[this.wh[0]];
     }
    }
    
    zxcOOPWH.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcSteps(zxcmd,zxcstps,zxcsrt,zxcfin,zxcrev){
     var zxcsary=[];
     if (zxcmd){
      for (zxc0=0;zxc0<90;zxc0+=90/(zxcstps-1)){ zxcsary.push(Math.floor((zxcfin-zxcsrt)+(zxcfin-zxcsrt)*Math.sin((zxc0+(zxcrev?270:360))*Math.PI/180))); }
      for (zxc1=1;zxc1<zxcsary.length;zxc1++){ zxcsary[zxc1]=zxcsary[zxc1]-zxcsary[0]+zxcsrt; }
     }
     else { for (zxc1=0;zxc1<zxcstps-1;zxc1++){ zxcsary[zxc1]=Math.floor(Math.abs((zxcsrt-zxcfin)/(zxcstps-1))*zxc1+Math.min(zxcsrt,zxcfin)); } }
     if (zxcmd){ zxcsary[0]=zxcsrt; zxcsary.push(zxcfin); }
     else if (zxcsrt>zxcfin){ zxcsary.push(zxcsrt); zxcsary=zxcsary.reverse();  }
     else { zxcsary.push(zxcfin); }
     return zxcsary;
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcWHSlide('Tst1','HP',20,500);">
    
    <div id="Tst1" style="position:relative;width:500px;height:20px;border:solid black 1px;" onclick="zxcWHExecute('Tst1HP');" >
    Click to Show<br>
    <br>
    0 Line<br>
    1 Line<br>
    2 Line<br>
    3 Line<br>
    4 Line<br>
    5 Line<br>
    6 Line<br>
    7 Line<br>
    8 Line<br>
    9 Line<br>
    10 Line<br>
    11 Line<br>
    12 Line<br>
    13 Line<br>
    14 Line<br>
    15 Line<br>
    16 Line<br>
    17 Line<br>
    18 Line<br>
    19 Line<br>
    </div>
    </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/


  •  

    Posting Permissions

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