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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with text fading scripts with text variations

    Hello everyone. I was wondering if anyone could help me come up with a script for fading text in and out then changing the text to something different when it fades back in again. I want to overlay a series of quotes on my website across the top and have them display for about 15 seconds then fade out to a new quote and have it cycle through them all indefinitely. I am pretty new to javascript and not much more experienced in html in general, so please be as thorough as possible. I'm a true noob Thanks!

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SymphonicTonic View Post
    Hello everyone. I was wondering if anyone could help me come up with a script for fading text in and out then changing the text to something different when it fades back in again. I want to overlay a series of quotes on my website across the top and have them display for about 15 seconds then fade out to a new quote and have it cycle through them all indefinitely. I am pretty new to javascript and not much more experienced in html in general, so please be as thorough as possible. I'm a true noob Thanks!
    If you can't explain it to a six year old, you don't understand it yourself. -Albert Einstein

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Are you planning to use a framework like jQuery? I don't want to start explaining the rights and wrongs for using frameworks, I just need to know. jQuery offers a wide variety of effects that otherwise need to be implemented "manually".

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I'll use jQuery.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    HTML
    Code:
    <div id="quotearea" style="position:fixed; top:0; left:0; width: 100%; height: 30px;"></div>
    Code:
    var quotes = [
       "This is quote 1",
       "This is quote 2",
       "This is quote 3"
    ];
    
    var quotePos = 0;
    
    showQuote();
    
    window.setTimeout(changeQuote, 15000);
    
    function changeQuote() {
       quotePos++;
       if(quotePos == quotes.length) quotePos = 0;
       showQuote();
       window.setTimeout(changeQuote, 15000);
    }
    
    function showQuote() {
       $('#quotearea').hide('slow').html(quotes[quotePos]).show('slow');
    }


  •  

    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
    •