Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text Slideshow, need SERIOUS help!

    Hey Guys

    I know nothing about coding so I am coming to you all for help. Please don't laugh at me haha. I am building a personal website and one of the sections is testimonials. I want the website to show one testimonial at a time, then fade it out and fade in the next one.

    I want it to look like this slide show, just instead of pictures have text. http://css-tricks.com/examples/SimpleSlideshow/

    I have started to build a code for this but it doesn't work. What I have is as follows. If anyone could make the modifications I need to make it work that would be great

    Code:
    <div id="slideshow">
       <div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">I had the pleasure of having Zach be part of my team for the Outreach division of the Bentley Microfinance Group. Zach was proactive in making recommendations to the group and was integral in transforming the group to what it is today. Working in a position that required sensitive social interactions, I would feel comfortable putting Zach in front of any client.
    <br>
    <br>Matthew Picarello <span style="font-style:italic">, Investment Banking Analst, J.P. Morgan</span></p>
       </div>
       <div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">Zak is a natural leader. He motivates and guides others through his ability to communicate effectively. In my experience, Zak approaches each task with both an innovative and creative prospective. He is a provider of honest feedback and is sought out frequently for advice. Any organization would benefit greatly with Zak on their team.
    <br>
    <br>Conor Lamo <span style="font-style:italic">, Insurance Operations Leadership Development Program, Travelers</span></p>
       </div>
    	<div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">I got the opportunity to work with Zach as an MBA consultant for his Capstone project. Zach is hardworking and works well in a team. As part of an excellent group, Zach coordinated effectively with his team members and attached more importance to the team's goal than to individual contributions. Different members of the team with diverse backgrounds went through the forming and eventually performing cycle of the Capstone project to deliver a well-researched and commendable presentation. It was my pleasure to work with Zach and I wish him good luck with his future endeavors.
    <br>
    <br>Swapneel Desai <span style="font-style:italic">, Senior Financial Analyst, ATT</span></p>
       </div>
    <div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">Zak is an extremely ambitious individual. He is one of the most hard working people that I have ever been around. He is willing to do whatever it takes to accomplish any of his goals. Whenever he is given a task, he goes above and beyond to accomplish it. He balances everything on his plate with pure ease and completes everything with a smile on his face. He brings forth many assets to the table that help him become the successful individual that he is to this day. He is an extremely strong member of any team that he is a part of and his appearance and hard work does not go unrecognized.
    <br>
    <br>Nicholas Ashley <span style="font-style:italic">, Financial Analst, Merrill Lynch</span></p>
       </div>
    	<div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">Zak is always passionate about investing, the markets and finance in general. Discussing the recent market trends, developments, and ideas has become routine with Zak, and he is very knowledgeable and has a desire to learn more and keep dissecting investment ideas and develop the thesis and catalysts that affect the stock's movements.
    <br>
    <br>Dan Stroller <span style="font-style:italic">, Investment Banking Analyst, Oppenheimer &amp; Co.</span></p>
       </div>
    <div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">Zachary is a hardworking motivated student who understands what is needed to succeed. He is persistent in his work and will consistently achieve high level results.
    <br>
    <br>Joshua Kulak <span style="font-style:italic">, Financial Leadership Program Associate, United Technologies</span></p>
       </div>
    <div>
         <p style="font: 14pt/22pt " helveticaneue-light",="" "helvetica="" neue="" light",="" neue",helvetica,="" arial,="" "lucida="" grande",="" sans-serif;;color:##666666;"="">Zachary has great analytical skills and excellent work ethics. He quickly learned the tasks necessary for him to be effective with his summer projects. He did not hestiate to ask questions and learn, in order to make recommendations in timely manner. Most importantly, he has a strong drive to get the most value during his summer internship.
    <br>
    <br>Preecha Sensarn <span style="font-style:italic">,Product Director, Travelers</span></p>
       </div>
    </div>
    
    #slideshow { 
        margin: 50px auto; 
        position: relative; 
        width: 240px; 
        height: 240px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    
    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
    
    $("#slideshow > div:gt(0)").hide();
    
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    You have numerous syntax errors and incorrectly nested " characters and ....
    It appears you are trying to use JSquery, but I don't see where you load that information.

    Starting for scratch, without using JSquery,
    from post #2 of: http://www.webdeveloper.com/forum/sh...ight=fade+text

    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>
    Google is your friend, use it.


  •  

    Tags for this Thread

    Posting Permissions

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