Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This Pure-JS example will work with any number of divs with your current pattern, so you can have id "news4", "news5", "news6", etc.</p> <p>Also, you can change how frequently the news changes that is shown by changing the INTERVAL variable, in this example the news will change every 1 second.</p> <p><strong>JSFIDDLE -- <a href="http://jsfiddle.net/g9YRb/3/" rel="nofollow">http://jsfiddle.net/g9YRb/3/</a></strong></p> <p><strong>JS</strong></p> <pre><code>var INTERVAL = 1000; var myprefix = "news"; var maxnewsnumber = document.getElementsByTagName("div").length; var myindex = 0; function alternatenews(idx) { idx++; myindex = idx; function retrigger() { setTimeout(function() { alternatenews(myindex); },INTERVAL); } if(myindex &gt; maxnewsnumber) { document.getElementById(myprefix + parseInt(myindex-1)).style.visibility = "hidden"; myindex = 0; alternatenews(myindex); } else if(myindex == 1) { document.getElementById(myprefix + myindex).style.visibility = "visible"; retrigger(); } else { document.getElementById(myprefix + parseInt(myindex-1) ).style.visibility = "hidden"; document.getElementById(myprefix + myindex).style.visibility = "visible"; retrigger(); } } alternatenews(myindex); </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div id="news1"&gt;Here are some news! 1111&lt;/div&gt; &lt;div id="news2"&gt;Here are some news! 2222&lt;/div&gt; &lt;div id="news3"&gt;Here are some news! 3333&lt;/div&gt; &lt;div id="news4"&gt;Here are some news! 4444&lt;/div&gt; &lt;div id="news5"&gt;Here are some news! 5555&lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>div { visibility: hidden } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload