Fade Out Testimonials

Printable View

Show 40 post(s) from this thread on one page

02-20-2010, 04:07 PM
bfurnace

Fade Out Testimonials

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);
}
02-20-2010, 08:23 PM
JMRKER

Consider these changes ...

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...:D

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!
:)
02-20-2010, 10:08 PM
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!
02-20-2010, 10:54 PM
JMRKER

Huh ???

Quote:

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? :confused:
02-20-2010, 11:14 PM
bfurnace

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...:rolleyes:
02-20-2010, 11:31 PM
JMRKER

No 'java' involved in the script!

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.
:)
02-21-2010, 11:23 AM
bfurnace

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!
02-21-2010, 03:16 PM
JMRKER

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

BTW, what/where does you final program look like?
02-21-2010, 07:36 PM
bfurnace

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
02-24-2010, 03:41 PM
bfurnace

One last question on this. How can I change the script to pull the variables at random instead of going in order?
02-24-2010, 03:48 PM
JMRKER

You can try changing:

Code:

// fileInx++; // fileInx = (fileInx % Testimonials.length); fileInx = Math.round(Math.random()*Testimonials.length);

With only 5 entries, it might not appear too random.
Untested code. Should work.
:)
02-24-2010, 03:54 PM
bfurnace

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?
02-24-2010, 07:56 PM
JMRKER

Try:

Code:

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

Again, untested, but should work.
Let us know.
02-24-2010, 08:01 PM
bfurnace

Everything works fine except that every 5-6 rotations I get "undefined" that flashes and then it goes back to actual quotes.
02-24-2010, 09:20 PM
JMRKER

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

Show 40 post(s) from this thread on one page