CODEWITHSUNDEEP
javascripthtmlslider
Patrick Sharer
Patrick Sharer

Reputation: 100

How to change text content within div over set amount of time (3 second interval)

I have a div with content that needs to change over a 3 second interval. I would like the "top-3" section to update every 3 seconds with 3 more names. 

<div class="grid-80 mobile-grid-100">
                <section class="top-3">
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#1 Juan Pablo Montoya</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#2 Tony Stewart</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#3 Mark Martin</p>
                    </div>
                </section>
            </div>

So it would go from the above and then 3 seconds later it will show, 

<div class="grid-80 mobile-grid-100">
                <section class="top-3">
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#4 New Name</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#5 New Name</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#6 New Name</p>
                    </div>
                </section>
            </div>

I know there has to be a more lightweight way to do this rather than running a content slider plugin. Thanks!

Upvotes: 0

Views: 1375

Answers (1)

Getter Jetter
Getter Jetter

Reputation: 2081

Maybe something like this?

<html>
  <head>
  </head>
  <body>
    <div class="grid-80 mobile-grid-100">
      <section class="top-3">
        <div class="grid-33 mobile-grid-100">
          <p class="pwr-ranking-name">#1 John</p>
        </div>
        <div class="grid-33 mobile-grid-100">
          <p class="pwr-ranking-name">#2 Anna</p>
        </div>
        <div class="grid-33 mobile-grid-100">
          <p class="pwr-ranking-name">#3 Marta</p>
        </div>
      </section>
    </div>
    <script type="text/javascript">
      var count = 3;
      var names = ['John', 'Anna', 'Marta', 'Mike', 'Alexandre', 'Olivier',  'Elisabeth', 'Angelina', 'Sophie'];
      var namesContainer = document.getElementsByClassName('pwr-ranking-name');
      setInterval(function(){
        for(var i = 0; i<3; i++){
          namesContainer[i].innerHTML = '#' + (count+1) + ' ' + names[count];
          count++;
          if(count == names.length){
            count = 0;
          };
        }
      }, 3000);
    </script>
  </body>
</html>

Upvotes: 2

Related Questions