I'm trying to use javascript to fade text in and out, without an onClick event Need new eyes

Question

Trying to fade one quote to another like http://jsfiddle.net/jfriend00/n4mKw/ But I just can’t see where I went wrong, can somebody lend a set of eyes please. Thanks! you can see it at www.sarahluiz.net/index2.html Here's the breakdown of what I'm working on. Javascript placed just before

</head><script type="text/javascript">
(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

})();</script>

HTML (I did add a div here)

<div align="center">
<h1>Hi, I'm Sarah Luiz</h1><h1 class="quote">Boy next door.</h1> 
<h1 class="quote">Girl next door.</h1>
<h1 class="quote">Money.</h1> 
<h1 class="quote">Kings.</h1><h1 class="quote">World Famous.</h1>
<h1 class="quote">Homeless.</h1><h1 class="quote">Back to Riches.</h1>
<h1 class="quote">Unstoppable.</h1> </div>

CSS

.quote{
display:none;
}

You've posted the code of the fiddle and the fiddle works. What's the question? If it's that it's not working on *your* site and you're expecting people to go to your site and debug it for you, that's inappropriate for SO. See the [help center](http://stackoverflow.com/help/dont-ask) for why. — T.J. Crowder, Jun 21 '14 at 06:59
Start by debugging your own site - Uncaught ReferenceError: $ is not defined! (jquery is not loaded) — , Jun 21 '14 at 07:04

score 0 · Accepted Answer · answered Jun 21 '14 at 06:58

0

Include jquery.js for your function to run

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

answered Jun 21 '14 at 06:58

rajesh kakawat

10,826
1
21
40

score 0 · Answer 2 · answered Jun 21 '14 at 07:04

0

DEMO

 var quotes = $(".quote");


 .quote {
    display: none;
}

it is .quote not .quotes as defined in html

answered Jun 21 '14 at 07:04

Maulik Anand

1,429
3
15
19

score 0 · Answer 3 · edited May 23 '17 at 12:20

You need to place this part just before the closing body tag (end of body)

  <script type="text/javascript">(function() {

    var quotes = $(".quote"); 
    // this part ".quote" is the class selector so match this with the elements class
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();</script>

You are putting your scripts in the head section and executing them immediately. Even before the DOM gets initialized. So your javascript does'nt know what is ".quotes"

If you want to keep the script in the head section but still wait till the elements are initialized. Then you must edit your code to this...

<script type="text/javascript">
$(function() {

    var quotes = $(".quote");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

});
</script>

I'd recommend you to read Javascript basics. Where to place Javascript in a HTML file?

Also just check if you added jquery library as mentioned by Rajesh Recommend you not try this online on the server. Learn to run a local server / a project on your test PC etc... Also learn to debug simple things like this using browser development tools (Firebug, Chrome tools).

On Firefox Ctrl + Shift + K brings the development console. On Chrome Ctrl + Shift + J brings the dev console. Look and learn to debug errors from there.

I'm trying to use javascript to fade text in and out, without an onClick event Need new eyes

3 Answers3