CODEWITHSUNDEEP
javascriptjqueryhtml
Web O
Web O

Reputation: 103

Displaying more quotes

Im trying to display in my websie 3 quotes, one after one. For example, Quote No.1 displaying first, after 5 seconds the quote dissapear and I wants to see the second quote, then third quote... and then again the first quote.

This is my quote code (Possible to duclipate it and made two more quotes):

<blockquote class="blockquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">A name of someone, <cite title="Source Title">His job</cite></footer>
</blockquote>

I'm not sure how to do it on JS. this is what I thinks the beginning of the code should be:

setInterval(function () {
    $("x").fadeOut(500, function () {
        $("x").html($("x").html() == "";
        $("x").fadeIn(500);
    });
}, 5000)

I'm not sure what I should write instead of "x" and in this line either: $("x").html($("x").html() == "";. Any suggestions?

Upvotes: 1

Views: 58

Answers (2)

Uriel
Uriel

Reputation: 16184

Try saving the quotes in an array, and iterate it (should be self documenting):

var quotes = 
[
  {quote: "Some great quote", by: "Some great man", title: "With a nice title"},
  {quote: "Another quote", by: "Another great man", title: "With a pretty cool title"},
  {quote: "Last one for now", by: "A truly great man", title: "Without any title :("}
]

var quote_num = 0;

setInterval(function () {
  var quote = quotes[quote_num];
  quote_num  = (quote_num + 1) % quotes.length;
  
  $.when($(".quote").fadeOut(500)).then(function(){
    $("#quote").html(quote.quote);
    $("#quoted").html(quote.by);
    $("#title").html(quote.title);
    $(".quote").fadeIn(500);}
  );
}, 2500)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="quote">
    <p id="quote">Original quote</p>
    <span id="quoted">Orignal great man</span> &nbsp;&nbsp;<cite id="title">His title</cite>
</blockquote>

Upvotes: 3

blurfus
blurfus

Reputation: 14031

This would be my take on it.

You can store all your quotes in an array and then loop through the array (either in order or in random order)

$(function() {
  var quotesStore = [{
    "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.",
    "author": "Some One",
    "jobTitle": "Title One"
  }, {
    "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.",
    "author": "Some Two",
    "jobTitle": "Title Two"
  }, {
    "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.",
    "author": "Some Three",
    "jobTitle": "Title Three"
  }];

  var idx = 0;
  var updateQuotes = function() {
    $("#quotes").fadeOut(500, function() {
      $(this).find("blockquote > p").html(quotesStore[idx].quote);
      var citationDiv = $(this).find("blockquote > footer > cite");
      var footerDiv = $(this).find("blockquote > footer");

      $(citationDiv).html(quotesStore[idx].jobTitle);
      $(footerDiv).html(quotesStore[idx].author).append(citationDiv);
      $(this).fadeIn(500);

      idx++;

      // reset the index if bigger than array with quotes
      if (idx >= quotesStore.length) {
        idx = 0;
      }
    });
  };

  setInterval(updateQuotes, 2000); // In milliseconds, 2 * 1000 = 2 secs
});
cite {
  padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quotes">
  <blockquote class="blockquote">
    <p></p>
    <footer class="blockquote-footer"><cite title="Source Title"></cite>
    </footer>
  </blockquote>
</div>

Upvotes: 1

Related Questions