Fade Out Testimonials

**JMRKER** · 02-15-2011 12:27 PM

Don't try to control two different time periods with one counter.
Use setTimeout() instead.

Code:

<html>
<head>
<title>Testimonials</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1139291#post1139291

var Testimonials = [
  ['“I was extremely hesitant to start, but the staff at AFS held my hand every step of the way,'
  +' and I am pleased with their service and results–“ <br>Lisa – CA'],
  ['“The negotiators at AFS were great! My program was completed 6 months early due to their successful negotiating!'
  +' Now I have NO debt!” <br>Michael – TX'],
  ['“Thanks to AFS, I now have $1200.00 in extra cash flow each month, FOR ME! - rather than it going to the creditors!'
  + ' It is a huge weight off of my shoulders!” <br>Thomas – FL'],
  ['“If you want or need to get out debt once and for all – This is the avenue to take!” <br>Jennifer – MA'],
  ['“I have tried everything over the past 5 years to eliminate my debt'
  +' – Utilizing a program through AFS actually helped me do it!” <br>Chris - AR']	// Note: no comma after last entry
];

var fileInx = 0;
var fadeCnt = 0;
var fadeInc = 5;

var fadePause = 5;  // constant of seconds to display without fade
var PauseFade = 5;  // variable to modify

function dispTestimonialPause() {
  PauseFade--;
  if (PauseFade > 0) { setTimeout("dispTestimonialPause()",1000); }
                else { PauseFade = fadePause;  setTimeout("dispTestimonial()",100); }
}

function dispTestimonial () {
  document.getElementById("testimonials").innerHTML = Testimonials[fileInx]; // +'<p>'+fadeCnt;
  document.getElementById('testimonials').style.opacity = (fadeCnt/100).toFixed(2);
  document.getElementById('testimonials').style.filter = 'alpha(opacity=' + fadeCnt + ')';
  fadeCnt += fadeInc;
  var flag = false;
  if (fadeCnt >= 100) { fadeInc *= -1; flag = true; }
  if (fadeCnt <= 0)   { fadeInc *= -1;
    fileInx++;    fileInx = (fileInx % Testimonials.length);
  }
  if (flag) { setTimeout("dispTestimonialPause()",1000); }
       else { setTimeout("dispTestimonial()",100); }
}

window.onload = function () {
  setTimeout("dispTestimonial()", 100);
} 
</script>
</head>
<body>
<h3>Testimonials</h3>
<div id="testimonials" style="width:200px;background:yellow"></div>
</body>
</html>

You can vary the fadePause variable for total visible time to display.

Good Luck!

**evasey951** · 02-15-2011 01:39 PM

Thanks alot, that looks perfect.

**JMRKER** · 02-15-2011 07:15 PM

Originally Posted by evasey951

Thanks alot, that looks perfect.

You're most welcome.
Happy to help.
Good Luck!

**SlickRed** · 02-22-2013 11:14 AM

Hi,

I know this is an old thread, but I was hoping someone might be able to give me some advice.

I'm a javascript novice, and have been attempting to implement this testimonials fade-in script on a php site of mine.
I have it working mostly exactly as I would like. I have testimonials stored in a mysql database, including an image of the person who submitted the testimonial.

The text is fading in an out perfectly, however I can't seem to get the images to display. When I include the img tags, the entire script stops working.

Here is my code:

I know it isn't very clean php, apologies for that! It looks like this because I've been trying to pinpoint the issue.
I hope someone can point my in the right direction.

Thanks in advance!

**SlickRed** · 02-22-2013 11:17 AM

Edit:

Sorry, I forgot to include the code that I'm using to grab the image.
It's irrelvant though, even if I replace

<td width=25%>image</td>

with

I get the same problem, the script stops displaying the text.

Thanks!

Thread: Fade Out Testimonials

Thread Tools

Display

Alternate attempt ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions