www.webdeveloper.com
Page 3 of 3 FirstFirst 123
Results 31 to 35 of 35

Thread: Fade Out Testimonials

  1. #31
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Lightbulb Alternate attempt ...

    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!

  2. #32
    Join Date
    Feb 2011
    Posts
    4
    Thanks alot, that looks perfect.

  3. #33
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Thumbs up

    Quote Originally Posted by evasey951 View Post
    Thanks alot, that looks perfect.
    You're most welcome.
    Happy to help.
    Good Luck!

  4. #34
    Join Date
    Feb 2013
    Posts
    2
    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:

    <script type='text/javascript'>

    var Testimonials = [

    ";

    include("dbConnect.php");

    $query = "SELECT * FROM testimon";
    $result = mysql_query($query) or die(mysql_error());

    while($row = mysql_fetch_array($result)){
    $com[] = $row['comment'];
    $name[] = $row['name'];
    $imgloc[] = $row['imgloc'];
    }
    $count = count($com);
    $x=0;
    while($x < $count){
    echo "['";
    echo "<table><tr><td width=25%>image</td><td>";
    echo $com[$x]; echo "<br><br>- "; echo $name[$x];
    echo "</td></tr></table>";
    echo "']";
    $x +=1;
    if ($x <> $count) { echo ","; }
    }


    echo "
    ];

    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>

    <center>
    <div id='testimonials' class='transparent_class'>
    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!

  5. #35
    Join Date
    Feb 2013
    Posts
    2
    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
    <td width=25%><img src='img/img1.jpg'></td>
    I get the same problem, the script stops displaying the text.

    Thanks!

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