www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 35

Thread: Fade Out Testimonials

Hybrid View

  1. #1
    Join Date
    Feb 2010
    Posts
    13

    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);
    }

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb 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...
    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!

  3. #3
    Join Date
    Feb 2010
    Posts
    13
    So does this go in the actual HTML file of the page or does this go into the javascript file? Thanks for the help!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question Huh ???

    Quote Originally Posted by bfurnace View Post
    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?

  5. #5
    Join Date
    Feb 2010
    Posts
    13
    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...

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Exclamation 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.

  7. #7
    Join Date
    Feb 2010
    Posts
    13
    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!
    Last edited by bfurnace; 02-21-2010 at 11:31 AM.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    You're most welcome.
    Happy to help.
    Good Luck!


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

  9. #9
    Join Date
    Feb 2010
    Posts
    13
    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

  10. #10
    Join Date
    Feb 2010
    Posts
    13
    One last question on this. How can I change the script to pull the variables at random instead of going in order?

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    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.

  12. #12
    Join Date
    Feb 2010
    Posts
    13
    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?

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Try:
    Code:
    window.onload = function () {
      fileInx = Math.round(Math.random()*Testimonials.length);
      dispTestimonial()
      setInterval("dispTestimonial()", 100);
    }
    Again, untested, but should work.
    Let us know.

  14. #14
    Join Date
    Feb 2010
    Posts
    13
    Everything works fine except that every 5-6 rotations I get "undefined" that flashes and then it goes back to actual quotes.

  15. #15
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Show the code that you are using or a link to your site.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles