Note that there are some explanatory texts on larger screens.

plurals
  1. POsetInterval advance to next div when timer has cycled
    text
    copied!<p>I've been fiddling with this:</p> <p><a href="http://jsfiddle.net/bXJhe/46/" rel="nofollow">http://jsfiddle.net/bXJhe/46/</a></p> <p>What I need is for the time to advance to the next div id after timer has cycled. I click on "one" and it shows the current id, then it should advance to "two", "three"... and show their respective ids. I do not want to use jQuery's .remove() or .detach(). Any insight would be fantastic.</p> <p>Have a big project due, and no hair left to pull out.</p> <p>HTML:</p> <pre><code>&lt;span id="bar"&gt;&lt;/span&gt; &lt;span id="timer"&gt;00:05&lt;/span&gt; &lt;div id="one"&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/div&gt; &lt;div id="two"&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/div&gt; &lt;div id="three"&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/div&gt; &lt;div id="four"&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/div&gt; </code></pre> <p>JS:</p> <pre><code>jQuery(document).ready(function() { jQuery('div').not(':first').hide(); jQuery('a').hide(); timer(5) }); // Timer var GLOBAL_TIMER; function timer(intCount) { GLOBAL_TIMER = setInterval(function() { var intTickLength = 5; jQuery('#bar').css('width', intCount * intTickLength + 'px'); jQuery('#timer').html('00:0' + intCount--); if (intCount &lt; 0) { jQuery('a').show('slow'); jQuery('a').click(function() { id = jQuery(this).parent('div').attr('id'); alert('current id: ' + id); jQuery(this).hide(); timer(5); }); stopTimer(); } }, 1000); } function stopTimer() { clearInterval(GLOBAL_TIMER); } </code></pre>
 

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