Fade Out Testimonials

**bfurnace** · 02-20-2010 04:07 PM

Hello,
I've got a website that I'm trying to update and I'd like to have the testimonials automatically swap out every 10 seconds or so in a preformatted div tag. I have the code to make the testimonials switch but instead of a hard, instantaneous swap I'd like to have it fade out and fade in with the new one. Could you guys help me out? This is the code I have so far:

var fileArr = ["Testimonials/one.txt", "Testimonials/two.txt","Testimonials/three.txt"];
var fileInx = 0;
function dispTestimonial () {
document.getElementById("testimonials").innerHTML = getFile(fileArr[fileInx]);
fileInx++;
if (fileInx >= fileArr.length) fileInx = 0;
}

function getFile(fileName){
oxmlhttp = null;
try{
oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e){
try{
oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
return null;
}
}
if(!oxmlhttp) return null;
try{
oxmlhttp.open("GET",fileName,false);
oxmlhttp.send(null);
}
catch(e){
return null;
}
return oxmlhttp.responseText;
}

window.onload = function () {
dispTestimonial()
setInterval("dispTestimonial()", 5000);
}

**JMRKER** · 02-20-2010 08:23 PM

I did not see the reason for the external text files as you can put the information into an external JS file just as easy.

See if this works for you...

Code:

<html>
<head>
<title>Testimonial Displays</title>
<style type="text/css">
.transparent_class {
	font-size:2em; 
    height:150px; 
    width:400px; 
    border:5px solid red;
}
</style>
<script type="text/javascript">

var Testimonials = [
	['This<br>is<br>great!!'],
	['Wonderful in it\'s execution!'],
	['Above supercalifragilestic-'],
	['Beyond -expedaliocis'],
	['Above and beyond<br>supercalifragilesticexpedaliocis'],
	['Gees<br>...<p>what a bummer.']			// Note: no comma after last entry
	];
	
var fileInx = 0;
var fadeCnt = 0;
var fadeInc = 5;

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;
  if (fadeCnt >= 100) { fadeInc *= -1; }
  if (fadeCnt <= 0) {
	fadeInc *= -1;   
    fileInx++;
    fileInx = (fileInx % Testimonials.length);  
  }
}

window.onload = function () {
  dispTestimonial()
  setInterval("dispTestimonial()", 100);
}
</script>
</head>
<body>
<center>
<div id="testimonials" class="transparent_class"></div>
</center>
</body>
</html>

Good Luck!

**bfurnace** · 02-20-2010 10:08 PM

So does this go in the actual HTML file of the page or does this go into the javascript file? Thanks for the help!

**JMRKER** · 02-20-2010 10:54 PM

Originally Posted by bfurnace

So does this go in the actual HTML file of the page or does this go into the javascript file? Thanks for the help!

Which "this" are you talking about?

**bfurnace** · 02-20-2010 11:14 PM

The code that you pasted into the post, does that go into the java file? You'll have to work with me a bit. I'm just getting my feet wet on the java side of coding...

**JMRKER** · 02-20-2010 11:31 PM

None of the code is 'java'. It is all HTML and javascript only.

I was suggesting, if you want to - not necessary, to put the testimonial statements into an external JS file and call it with

Code:

<script type="text/javascript" src="Testimonials.js"></script>

If you do this, DO NOT put any HTML into the external file.

You could also just replace my dummy statements with your own.
Use the example as a template as to how to add the statements into the array.

Either post the code or a link to the program after your attempts.

**bfurnace** · 02-21-2010 11:23 AM

It worked! Thank you so much for the help! I'm thrilled that it works.

EDIT: I've figured out how to get the settings the way I'd like. Thanks again!

**JMRKER** · 02-21-2010 03:16 PM

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

BTW, what/where does you final program look like?

**bfurnace** · 02-21-2010 07:36 PM

Here's the test site I have up for the time being while I write content and fill it out.

http://www.austintxwindowcleaning.co...ite/index.html

**bfurnace** · 02-24-2010 03:41 PM

One last question on this. How can I change the script to pull the variables at random instead of going in order?

**JMRKER** · 02-24-2010 03:48 PM

You can try changing:

Code:

//    fileInx++;
//    fileInx = (fileInx &#37; Testimonials.length);  
    fileInx = Math.round(Math.random()*Testimonials.length);

With only 5 entries, it might not appear too random.
Untested code. Should work.

**bfurnace** · 02-24-2010 03:54 PM

It still starts with the same testimonial every time I load a new page. Is there a way to start the sequence with a random number so that one will be different as well?

**JMRKER** · 02-24-2010 07:56 PM

Try:

Code:

window.onload = function () {
  fileInx = Math.round(Math.random()*Testimonials.length);
  dispTestimonial()
  setInterval("dispTestimonial()", 100);
}

Again, untested, but should work.
Let us know.

**bfurnace** · 02-24-2010 08:01 PM

Everything works fine except that every 5-6 rotations I get "undefined" that flashes and then it goes back to actual quotes.

**JMRKER** · 02-24-2010 09:20 PM

Show the code that you are using or a link to your site.

Thread: Fade Out Testimonials

Thread Tools

Display

Fade Out Testimonials

Consider these changes ...

Huh ???

No 'java' involved in the script!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions