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 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Looking for good testimonials solution

    Hello,

    I am adding a testimonials section to a client site.

    I would like to find something similar to quovolver (which I have used before), but something that also includes some ability for the user to scroll backwards and forwards through the quotes.... or maybe just forwards would even be fine.

    I just need the user to control the quotes, vs. quovolver which immediately scrolls the quotes with no ability for the user to control it.

    Thank you for any help!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Lightbulb

    There are a number of other ways to do this. Use this as a start ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     #testimonialDIV { position:relative; height:100px; width:200px; border:1px solid red; background-color:#ffff00; }
     #next { position:absolute; bottom:0; right:0px; }
     #prev { position:absolute; bottom:0; left:0px; }
    </style>
    
    </head>
    <body>
    <div id="testimonialDIV">
    <b>Testimonials</b>
    <div id="testimonial"></div>
    <button id="prev" onclick="showQuote('-1')">&lt;--</button>
    <button id="next" onclick="showQuote('1')">--&gt;</button>
    </div>
    
    <script type="text/javascript">
    var quotePtr = 0;
    var testimonials = [
     'First quotation',
     'Second quotation',
     'Third quotation',
     'Fourth quotation',
     'Fifth quotation',
     'Sixth quotation',
     'You can add <b style="color:red">as many</b> quotations <b style="color:blue">as you like</b>'
    ];
    
    function showQuote(which) {
      quotePtr += Number(which);
      if (quotePtr < 0) { quotePtr = testimonials.length-1; }
      else { if (quotePtr > testimonials.length-1) { quotePtr = 0; } }
      document.getElementById('testimonial').innerHTML = testimonials[quotePtr];
    }
    
    window.onload = function() { showQuote(0); }
    </script>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    rhender (06-08-2013)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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>
    	<link rel="stylesheet" type="text/css" media="screen" href="http://sandbox.sebnitu.com/jquery/quovolver/style.cssX">
    <style type="text/css">
    /*<![CDATA[*/
    /* ----- Global Styles ----- */
    
    /* Thanks Eric Meyer! *//* sidebar */
    
    .widget {
        position:relative;
        width:350px;
    	margin-bottom: 40px;
    	}
    
    .widget_content {
    	background-color: #f2eee6;
    	border: 1px solid #e5e1d9;
    	border-top: 0 none;
    	}
    
    blockquote {
    	font-family: "TimesNewRoman";
    	font-size: 14px; line-height: 21px;
    	font-style: italic;
    	width: 255px;
    	}
    
    blockquote p {
    	margin-bottom: 10px;
    	}
    
    blockquote cite {
    	display: block;
    	text-align: right;
    	}
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <input id="b1" type="button" name="" value="GoTo 0" />
     <input id="b2" type="button" name="" value="GoTo 1" />
     <input id="b3" type="button" name="" value="GoTo 2" />
     <input id="b4" type="button" name="" value="GoTo 3" />
     <input type="button" name="" value="GoTo 4" onmouseup="zxcMessageFader.GoTo('demo',4);"/>
     <input type="button" name="" value="GoTo 5" onmouseup="zxcMessageFader.GoTo('demo',5);"/>
     <input type="button" name="" value="GoTo 6" onmouseup="zxcMessageFader.GoTo('demo',6);"/>
     <input id="b5" type="button" name="" value="Next" />
     <input id="b6" type="button" name="" value="Back" />
    			<div id="demo" class="widget" >
    				<div class="widget_content">
    					<blockquote>
    						<p>
    							“0 Nulla facilisi. Mauris vel mattis risus. Ut nec luctus tortor. In interdum pulvinar quam non pharetra. Proin sed diam in lorem varius tempor. Vestibulum porta, diam quis mollis rutrum, dolor lectus interdum leo, malesuada convallis purus tortor sed turpis.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero metus, blandit at pulvinar at, feugiat ac est. Fusce turpis dolor, lobortis non consequat sed, varius ac nulla. Donec congue quam id nibh interdum pellentesque. Aenean ac elementum ipsum. Ut vel dui neque.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“2 Nunc semper dignissim nunc, vitae rutrum dolor tristique quis. Vivamus tincidunt odio a odio ultrices porttitor pulvinar lacus rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Curabitur porta lorem lectus, sed varius lectus.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“3 Aenean aliquam ornare tortor, non feugiat tortor venenatis at. Sed tempor placerat enim, ac interdum mi egestas hendrerit.”
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“4 uspendisse potenti. Nam pellentesque, dolor sit amet egestas volutpat, quam leo eleifend mauris, sed blandit nulla odio eu tellus. Etiam dapibus mauris eu felis varius at tincidunt turpis interdum. Aenean vitae odio odio, nec cursus purus. Morbi justo justo, malesuada et consectetur vel, sodales sit amet lacus. ”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“5 Vestibulum pellentesque sagittis tortor, vitae interdum justo mollis gravida. Maecenas vulputate, lacus et lacinia imperdiet, leo orci malesuada ipsum, volutpat aliquam sem augue sit amet mi. Nulla facilisi.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“6 Suspendisse potenti. Cras a eros a nulla accumsan sollicitudin. Nulla id suscipit turpis. Nunc posuere vehicula erat, a tempor lorem aliquet ac.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    				</div><!-- .widget_content -->
    			</div><!-- .widget -->
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Message Fader  (7-July-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcMessageFader={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;
       this.rotate(o,nu);
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,ms=o.Animate,hold=o.Hold,srt=o.AutoStart,add=o.AddEvents,ms=typeof(ms)=='number'&&ms>0?ms:1000,p=document.getElementById(id),d=p?p.getElementsByTagName('DIV')[0]:null;
      if (p&&d){
       var clds=d.childNodes,ary=[],z0=0,z1=0,z2=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         ary.push(clds[z0]);
        }
       }
       for (;z1<ary.length;z1++){
        d=d.cloneNode(false);
        d.appendChild(ary[z1]);
        d.style.position='absolute';
        d.style.zIndex=z1>0?'1':'2';
        d.style.left='0px';
        d.style.top='0px';
        ary[z1]=[d,'',z1>0?0:100];
        this.opc(d,z1>0?0:100);
        p.appendChild(d);
       }
       p.style.overflow='hidden';
       p.style.height=ary[0][0].offsetHeight+'px';
       o.id=id;
       o.p=[p,'height',ary[0][0].offsetHeight];
       o.ary=ary;
       o.lgth=ary.length-1;
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.cnt=0;
       o.ud=1;
       this['zxc'+id]=o;
       if (add instanceof Array){
        for (;z2<add.length;z2++){
         if (add[z0]&&add[z0][0]){
          o=document.getElementById(add[z2][0]);
          e=add[z2][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z2][2]]){
           this.addevt(o,e,add[z2][2],id,add[z2][3]);
          }
         }
        }
       }
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var c=o.cnt;
      o.ary[c][0].style.zIndex='1';
      this.animate(o,o.ary[c],o.ary[c][2],0,new Date(),o.ms);
      o.auto=auto===true;
      c=auto===true?c+=1:auto;
      c=c<0?o.lgth:c>o.lgth?0:c;
      o.ary[c][0].style.zIndex='2';
      this.animate(o,o.ary[c],o.ary[c][2],100,new Date(),o.ms,true);
      this.animate(o,o.p,o.p[2],o.ary[c][0].offsetHeight,new Date(),o.ms);
      o.cnt=c;
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
       a[2]=n;
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
       a[2]=t;
       o.auto&&ud?oop.Auto(o.id,o.hold):null;
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    zxcMessageFader.init({
     ID:'demo',     // the unique ID name of the image.                               (string)
     Animate:1000,  //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500, //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
     AddEvents:[    //(optional) an array befining event calls to add.                (array)
     // field 0 = the unique ID name of the element.
     // field 1 = the event type.
     // field 0 = the script function name.
     // field 0 = the parameter to pass to the function.
    
     ['b1','mouseup','GoTo',0],
     ['b2','mouseup','GoTo',1],
     ['b3','mouseup','GoTo',2],
     ['b4','mouseup','GoTo',3],
     ['b5','mouseup','Next',1],
     ['b6','mouseup','Next',-1],
     ['demo','mouseover','Pause'],
     ['demo','mouseout','Auto']
     ]
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    or

    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>
    	<link rel="stylesheet" type="text/css" media="screen" href="http://sandbox.sebnitu.com/jquery/quovolver/style.cssX">
    <style type="text/css">
    /*<![CDATA[*/
    /* ----- Global Styles ----- */
    
    /* Thanks Eric Meyer! *//* sidebar */
    
    .widget {
        position:relative;
        width:350px;
    	margin-bottom: 40px;
    	}
    
    .widget_content {
    	background-color: #f2eee6;
    	border: 1px solid #e5e1d9;
    	border-top: 0 none;
    	}
    
    blockquote {
    	font-family: "TimesNewRoman";
    	font-size: 14px; line-height: 21px;
    	font-style: italic;
    	width: 255px;
    	}
    
    blockquote p {
    	margin-bottom: 10px;
    	}
    
    blockquote cite {
    	display: block;
    	text-align: right;
    	}
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <input id="b1" type="button" name="" value="GoTo 0" />
     <input id="b2" type="button" name="" value="GoTo 1" />
     <input id="b3" type="button" name="" value="GoTo 2" />
     <input id="b4" type="button" name="" value="GoTo 3" />
     <input type="button" name="" value="GoTo 4" onmouseup="zxcMessageSlider.GoTo('demo',4);"/>
     <input type="button" name="" value="GoTo 5" onmouseup="zxcMessageSlider.GoTo('demo',5);"/>
     <input type="button" name="" value="GoTo 6" onmouseup="zxcMessageSlider.GoTo('demo',6);"/>
     <input id="b5" type="button" name="" value="Next" />
     <input id="b6" type="button" name="" value="Back" />
    			<div id="demo" class="widget" >
    				<div class="widget_content">
    					<blockquote>
    						<p>
    							“0 Nulla facilisi. Mauris vel mattis risus. Ut nec luctus tortor. In interdum pulvinar quam non pharetra. Proin sed diam in lorem varius tempor. Vestibulum porta, diam quis mollis rutrum, dolor lectus interdum leo, malesuada convallis purus tortor sed turpis.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero metus, blandit at pulvinar at, feugiat ac est. Fusce turpis dolor, lobortis non consequat sed, varius ac nulla. Donec congue quam id nibh interdum pellentesque. Aenean ac elementum ipsum. Ut vel dui neque.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“2 Nunc semper dignissim nunc, vitae rutrum dolor tristique quis. Vivamus tincidunt odio a odio ultrices porttitor pulvinar lacus rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Curabitur porta lorem lectus, sed varius lectus.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“3 Aenean aliquam ornare tortor, non feugiat tortor venenatis at. Sed tempor placerat enim, ac interdum mi egestas hendrerit.”
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“4 uspendisse potenti. Nam pellentesque, dolor sit amet egestas volutpat, quam leo eleifend mauris, sed blandit nulla odio eu tellus. Etiam dapibus mauris eu felis varius at tincidunt turpis interdum. Aenean vitae odio odio, nec cursus purus. Morbi justo justo, malesuada et consectetur vel, sodales sit amet lacus. ”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“5 Vestibulum pellentesque sagittis tortor, vitae interdum justo mollis gravida. Maecenas vulputate, lacus et lacinia imperdiet, leo orci malesuada ipsum, volutpat aliquam sem augue sit amet mi. Nulla facilisi.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    
    					<blockquote>
    						<p>
    							“6 Suspendisse potenti. Cras a eros a nulla accumsan sollicitudin. Nulla id suscipit turpis. Nunc posuere vehicula erat, a tempor lorem aliquet ac.”
    						</p>
    						<cite>– Quote Author</cite>
    					</blockquote>
    				</div><!-- .widget_content -->
    			</div><!-- .widget -->
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Message Slider  (7-July-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcMessageSlider={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;
       this.rotate(o,nu)
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,ms=o.Animate,hold=o.Hold,srt=o.AutoStart,add=o.AddEvents,ms=typeof(ms)=='number'&&ms>0?ms:1000,p=document.getElementById(id),d=p?p.getElementsByTagName('DIV')[0]:null;
      if (p&&d){
       var clds=d.childNodes,ary=[],z0=0,z1=0,z2=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         ary.push(clds[z0]);
        }
       }
       o.sz=p.offsetWidth;
       for (;z1<ary.length;z1++){
        d=d.cloneNode(false);
        d.appendChild(ary[z1]);
        d.style.position='absolute';
        d.style.zIndex=z1>0?'1':'2';
        d.style.left=(z1>0?o.sz:0)+'px';
        d.style.top='0px';
        ary[z1]=[d,'left'];
        p.appendChild(d);
       }
       p.style.overflow='hidden';
       p.style.height=ary[0][0].offsetHeight+'px';
       o.id=id;
       o.p=[p,'height',ary[0][0].offsetHeight];
       o.ary=ary;
       o.lgth=ary.length-1;
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.cnt=0;
       o.ud=1;
       this['zxc'+id]=o;
       if (add instanceof Array){
        for (;z2<add.length;z2++){
         if (add[z0]&&add[z0][0]){
          o=document.getElementById(add[z2][0]);
          e=add[z2][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z2][2]]){
           this.addevt(o,e,add[z2][2],id,add[z2][3]);
          }
         }
        }
       }
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var c=o.cnt;
      o.ary[c][0].style.zIndex='0';
      o.auto=auto===true;
      c=auto===true?c+=o.ud:auto;
      c=c<0?o.lgth:c>o.lgth?0:c;
      o.ary[c][0].style.zIndex='2';
      this.animate(o,o.ary[c],o.sz*(o.ud>0?1:-1),0,new Date(),o.ms,true);
      this.animate(o,o.ary[o.cnt],0,o.sz*(o.ud>0?-1:1),new Date(),o.ms*1.1);
      this.animate(o,o.p,o.p[2],o.ary[c][0].offsetHeight,new Date(),o.ms);
      o.cnt=c;
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
    //   ud&&a[0]!=ud?ud.style.left=o.sz+'px':null;
       o.auto&&ud?oop.Auto(o.id,o.hold):null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    zxcMessageSlider.init({
     ID:'demo',     // the unique ID name of the image.                               (string)
     Animate:1000,  //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Hold:2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart:500, //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
     AddEvents:[    //(optional) an array befining event calls to add.                (array)
     // field 0 = the unique ID name of the element.
     // field 1 = the event type.
     // field 0 = the script function name.
     // field 0 = the parameter to pass to the function.
    
     ['b1','mouseup','GoTo',0],
     ['b2','mouseup','GoTo',1],
     ['b3','mouseup','GoTo',2],
     ['b4','mouseup','GoTo',3],
     ['b5','mouseup','Next',1],
     ['b6','mouseup','Next',-1],
     ['demo','mouseover','Pause'],
     ['demo','mouseout','Auto']
     ]
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 06-07-2013 at 05:09 PM.
    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/

  • Users who have thanked vwphillips for this post:

    rhender (06-08-2013)

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks so much to both of you for your time. I really really appreciate it as always.

    I will probably modify the last one from Vic, but they all help.

    jmrker, your example will help me to understand some of the basics involved here with javascript... so thank you both!

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    So... now my next and back buttons are not working after I played with it for a bit.

    Could someone tell me if something is obviously wrong, which may be causing this problem for me??? thanks so much!
    Code:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <head>
    <title></title>
    <style>
    /* Thanks Eric Meyer! *//* sidebar */
    #testimonials-container {
    	width: 583px;
    	margin: 10px auto;
    	border: 1px solid;
    	}
    
    .widget {
        position: relative;
        width: 550px;
    	}
    
    .widget_content {
    	background-color: #f2eee6;
    	border: 1px solid #e5e1d9;
    	border-top: 0 none;
    	}
    
    blockquote {
    	font-family: "TimesNewRoman";
    	font-size: 14px; 
    	line-height: 21px;
    	font-style: italic;
    	width: 500px;
    	}
    
    blockquote p {
    	margin-bottom: 10px;
    	}
    
    blockquote cite {
    	display: block;
    	text-align: right;
    	}
    	
    #b5 {
    	background: #121212;
    	color: white;
    	padding: 4px 0;
    	width: 90px;
    	font-size: 14px;
    	border: none;
    	font-family: "helvetica neue", helvetica, arial, sans-serif;
    	}	
    	
    #b6 {
    	background: #121212;
    	color: white;
    	padding: 4px 0;
    	font-size: 13px;
    	border: none;
    	font-family: "helvetica neue", helvetica, arial, sans-serif;
    	width: 90px;
    	}
    	
    #b6:hover {
    	cursor: pointer;
    	background: #ccc;
    	color: black;
    	-webkit-transition: all .35s linear;
    	-moz-transition: all 0.35s linear 0s;
    	-o-transition: all .35s linear;
    	}
    
    #b5:hover {
    	cursor: pointer;
    	background: #ccc;
    	color: black;
    	-webkit-transition: all .35s linear;
    	-moz-transition: all 0.35s linear 0s;
    	-o-transition: all .35s linear;
    	}
    
    #testimonial-controls {
    	width: 185px;
    	float: right;
    	margin-right: 18px;
    	}
    	
    #demo {
    	width: 583px;
    	}
    </style>
    </head>
    <body>
      <div id="testimonials-container">
        <div id="demo" class="widget">
          <div class="widget_content">
    	    <blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&rdquo;</p>
    		<cite>– Jim B.</cite>
    		</blockquote>
    		<blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&rdquo;</p>
    		<cite>– Stacey S.</cite>
    		</blockquote>
    		<blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&rdquo;</p>
    		<cite>– Bob Z.</cite>	
    		</blockquote>
    		<blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&rdquo;</p>
    		<cite>– Wire R.</cite>
    		</blockquote>
    	  <!-- end .widget_content --></div>
        <!-- end #demo --></div>
        <div id="testimonial-controls">
    	  <input id="b6" type="button" name="" value="Back" /> 
    	  <input id="b5" type="button" name="" value="Next" />
    	<!-- end testimonial controls --></div>
    <!-- end testimonials-container --></div>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Message Slider  (7-July-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    var zxcMessageSlider={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;
       this.rotate(o,nu)
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,ms=o.Animate,hold=o.Hold,srt=o.AutoStart,add=o.AddEvents,ms=typeof(ms)=='number'&&ms>0?ms:1000,p=document.getElementById(id),d=p?p.getElementsByTagName('DIV')[0]:null;
      if (p&&d){
       var clds=d.childNodes,ary=[],z0=0,z1=0,z2=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         ary.push(clds[z0]);
        }
       }
       o.sz=p.offsetWidth;
       for (;z1<ary.length;z1++){
        d=d.cloneNode(false);
        d.appendChild(ary[z1]);
        d.style.position='absolute';
        d.style.zIndex=z1>0?'1':'2';
        d.style.left=(z1>0?o.sz:0)+'px';
        d.style.top='0px';
        ary[z1]=[d,'left'];
        p.appendChild(d);
       }
       p.style.overflow='hidden';
       p.style.height=ary[0][0].offsetHeight+'px';
       o.id=id;
       o.p=[p,'height',ary[0][0].offsetHeight];
       o.ary=ary;
       o.lgth=ary.length-1;
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.cnt=0;
       o.ud=1;
       this['zxc'+id]=o;
       if (add instanceof Array){
        for (;z2<add.length;z2++){
         if (add[z0]&&add[z0][0]){
          o=document.getElementById(add[z2][0]);
          e=add[z2][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z2][2]]){
           this.addevt(o,e,add[z2][2],id,add[z2][3]);
          }
         }
        }
       }
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var c=o.cnt;
      o.ary[c][0].style.zIndex='0';
      o.auto=auto===true;
      c=auto===true?c+=o.ud:auto;
      c=c<0?o.lgth:c>o.lgth?0:c;
      o.ary[c][0].style.zIndex='2';
      this.animate(o,o.ary[c],o.sz*(o.ud>0?1:-1),0,new Date(),o.ms,true);
      this.animate(o,o.ary[o.cnt],0,o.sz*(o.ud>0?-1:1),new Date(),o.ms*1.1);
      this.animate(o,o.p,o.p[2],o.ary[c][0].offsetHeight,new Date(),o.ms);
      o.cnt=c;
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
    //   ud&&a[0]!=ud?ud.style.left=o.sz+'px':null;
       o.auto&&ud?oop.Auto(o.id,o.hold):null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    zxcMessageSlider.init({
     ID: 'demo',     // the unique ID name of the image.                               (string)
     Animate: 1000,  //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Hold: 20000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart: 5000, //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
     AddEvents: [    //(optional) an array defining event calls to add.                (array)
     // field 0 = the unique ID name of the element.
     // field 1 = the event type.
     // field 0 = the script function name.
     // field 0 = the parameter to pass to the function.
    
     ['b5','mouseup','Next',1],
     ['b6','mouseup','Next',-1],
     ['demo','mouseover','Pause'],
     ['demo','mouseout','Auto']
     ]
    });
    /*]]>*/
    </script>
    </body>
    </html>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Arrow

    Quote Originally Posted by rhender View Post
    Thanks so much to both of you for your time. I really really appreciate it as always.

    I will probably modify the last one from Vic, but they all help.

    jmrker, your example will help me to understand some of the basics involved here with javascript... so thank you both!
    You're most welcome.
    Happy, I'm sure from both of us, to help.
    My version was just an example based on your requirements of the post to show you how it could be accomplished.
    'vwphillips' version is a little fancier with the CSS code added for fading and/or sliding.
    Easy enough to add to mine, but I'll let him suggest changes to your code based upon his script.

    Good Luck!

  • Users who have thanked jmrker for this post:

    rhender (06-09-2013)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,468
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <head>
    <title></title>
    <style>
    /* Thanks Eric Meyer! *//* sidebar */
    #testimonials-container {
    	width: 583px;
    	margin: 10px auto;
    	border: 1px solid;
    	}
    
    .widget {
        position: relative;
        width: 550px;
    	}
    
    .widget_content {
    	background-color: #f2eee6;
    	border: 1px solid #e5e1d9;
    	border-top: 0 none;
    	}
    
    blockquote {
    	font-family: "TimesNewRoman";
    	font-size: 14px;
    	line-height: 21px;
    	font-style: italic;
    	width: 500px;
    	}
    
    blockquote p {
    	margin-bottom: 10px;
    	}
    
    blockquote cite {
    	display: block;
    	text-align: right;
    	}
    
    #b5 {
    	background: #121212;
    	color: white;
    	padding: 4px 0;
    	width: 90px;
    	font-size: 14px;
    	border: none;
    	font-family: "helvetica neue", helvetica, arial, sans-serif;
    	}
    
    #b6 {
    	background: #121212;
    	color: white;
    	padding: 4px 0;
    	font-size: 13px;
    	border: none;
    	font-family: "helvetica neue", helvetica, arial, sans-serif;
    	width: 90px;
    	}
    
    #b6:hover {
    	cursor: pointer;
    	background: #ccc;
    	color: black;
    	-webkit-transition: all .35s linear;
    	-moz-transition: all 0.35s linear 0s;
    	-o-transition: all .35s linear;
    	}
    
    #b5:hover {
    	cursor: pointer;
    	background: #ccc;
    	color: black;
    	-webkit-transition: all .35s linear;
    	-moz-transition: all 0.35s linear 0s;
    	-o-transition: all .35s linear;
    	}
    
    #testimonial-controls {
    	width: 185px;
    	float: right;
    	margin-right: 18px;
    	}
    
    #demo {
    	width: 583px;
    	}
    </style>
    </head>
    <body>
      <div id="testimonials-container">
        <div id="demo" class="widget">
          <div class="widget_content">
    	    <blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&rdquo;</p>
    		<cite> Jim B.</cite>
    		</blockquote>
    		<blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&rdquo;</p>
    		<cite> Stacey S.</cite>
    		</blockquote>
    		<blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&rdquo;</p>
    		<cite> Bob Z.</cite>
    		</blockquote>
    		<blockquote><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&rdquo;</p>
    		<cite> Wire R.</cite>
    		</blockquote>
    
          </div><!-- end .widget_content -->
    
        </div><!-- end #demo -->
        <div id="testimonial-controls">
    	  <input id="b6" type="button" name="" value="Back" />
    	  <input id="b5" type="button" name="" value="Next" />
    	</div><!-- end testimonial controls -->
    
      </div><!-- end testimonials-container -->
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Message Slider  (7-July-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    var zxcMessageSlider={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=(typeof(ud)=='number'&&ud<0?-1:1);
      if (o){
       o.ud=ud;
       this.rotate(o,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]){
       o.ud=nu>o.cnt?1:-1;
       this.rotate(o,nu)
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id],oop=this;
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
      }
     },
    
     init:function(o){
      var id=o.ID,ms=o.Animate,hold=o.Hold,srt=o.AutoStart,add=o.AddEvents,ms=typeof(ms)=='number'&&ms>0?ms:1000,p=document.getElementById(id),d=p?p.getElementsByTagName('DIV')[0]:null;
      if (p&&d){
       var clds=d.childNodes,ary=[],z0=0,z1=0,z2=0;
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         ary.push(clds[z0]);
        }
       }
       o.sz=p.offsetWidth;
       for (;z1<ary.length;z1++){
        d=d.cloneNode(false);
        d.appendChild(ary[z1]);
        d.style.position='absolute';
        d.style.zIndex=z1>0?'1':'2';
        d.style.left=(z1>0?o.sz:0)+'px';
        d.style.top='0px';
        ary[z1]=[d,'left'];
        p.appendChild(d);
       }
       p.style.overflow='hidden';
       p.style.height=ary[0][0].offsetHeight+'px';
       o.id=id;
       o.p=[p,'height',ary[0][0].offsetHeight];
       o.ary=ary;
       o.lgth=ary.length-1;
       o.ms=ms;
       o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
       o.cnt=0;
       o.ud=1;
       this['zxc'+id]=o;
       if (add instanceof Array){
        for (;z2<add.length;z2++){
         if (add[z2]&&add[z2][0]){
          o=document.getElementById(add[z2][0]);
          e=add[z2][1];
          if (o&&(e=='mouseup'||e=='mousedown'||e=='mouseover'||e=='mouseout'||e=='click')&&this[add[z2][2]]){
           this.addevt(o,e,add[z2][2],id,add[z2][3]);
          }
         }
        }
       }
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     rotate:function(o,auto){
      this.Pause(o.id);
      var c=o.cnt;
      o.ary[c][0].style.zIndex='0';
      o.auto=auto===true;
      c=auto===true?c+=o.ud:auto;
      c=c<0?o.lgth:c>o.lgth?0:c;
      o.ary[c][0].style.zIndex='2';
      this.animate(o,o.ary[c],o.sz*(o.ud>0?1:-1),0,new Date(),o.ms,true);
      this.animate(o,o.ary[o.cnt],0,o.sz*(o.ud>0?-1:1),new Date(),o.ms*1.1);
      this.animate(o,o.p,o.p[2],o.ary[c][0].offsetHeight,new Date(),o.ms);
      o.cnt=c;
     },
    
     animate:function(o,a,f,t,srt,mS,ud){
      clearTimeout(a[4]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
    //   ud&&a[0]!=ud?ud.style.left=o.sz+'px':null;
       o.auto&&ud?oop.Auto(o.id,o.hold):null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    }
    
    zxcMessageSlider.init({
     ID: 'demo',     // the unique ID name of the image.                               (string)
     Animate: 1000,  //(optional) the animation duration in milli seconds.             (number, default = 1000)
     Hold: 2000,     //(optional) the auto rotation 'hold' delay milli seconds.        (number, default = Animate*4)
     AutoStart: 5000, //(optional) the delay milli seconds before starting auto rotate. (number, default = no auto start)
     AddEvents: [    //(optional) an array defining event calls to add.                (array)
     // field 0 = the unique ID name of the element.
     // field 1 = the event type.
     // field 0 = the script function name.
     // field 0 = the parameter to pass to the function.
    
     ['b5','mouseup','Next',1],
     ['b6','mouseup','Next',-1],
     ['demo','mouseover','Pause'],
     ['demo','mouseout','Auto']
     ]
    });
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    rhender (06-09-2013)

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks Vic! I really appreciate it. What had I changed to make it not work?

    I couldn't find any difference in the code?

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Exclamation

    Quote Originally Posted by rhender View Post
    Thanks Vic! I really appreciate it. What had I changed to make it not work?

    I couldn't find any difference in the code?
    Gee wiz!!! Don't use his time like that!
    Open two windows and compare your version to his, line by line or word by word.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Or. better use a "difference" program that will find the differences for you.

    What to use depends on what OS you are using. There are tons of free downloads of "diff" programs out there, though. (Personally, I still use windiff.exe from MS; it's old, but easy to use and works well.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rhender (06-10-2013)

  • #11
    New Coder
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Gee wiz!!! Don't use his time like that!
    Open two windows and compare your version to his, line by line or word by word.
    I figured if he corrected it he would probably know how he corrected it without having to read every line as I did already. ...


  •  

    Posting Permissions

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