Display Div for period of time before restarting timer

Metatron

New Member
I have a website that works right now with a countdown timer to display a div. It works with Jquery and a simple JSON response as follows: HTML : \[code\]<div class="info-block"> <strong class="logo"><a target="_blank" href="http://example.com">example.com</a></strong> <div class="date-block"> <span class="label">next Online experience in:</span> <ul class="countdown_timer"> <li> <span class="meta">hours</span> <strong class="number"><span class="counter_h">00</span> <span class="overlay">overlay</span></strong> </li> <li> <span class="meta">minutes</span> <strong class="number"><span class="counter_m">00</span> <span class="overlay">overlay</span></strong> </li> <li> <span class="meta">seconds</span> <strong class="number"><span class="counter_s">00</span> <span class="overlay">overlay</span></strong> </li> </ul> <div class="live_now">Live Now!</div> <a target="_blank" href="http://example.com"></a> </div> </div>\[/code\]Javascript: \[code\]jQuery(function() { $.getQuery = function( query ) { query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var expr = "[\\?&]"+query+"=([^&#]*)"; var regex = new RegExp( expr ); var results = regex.exec( window.location.href ); if( results !== null ) { return results[1]; return decodeURIComponent(results[1].replace(/\+/g, " ")); } else { return false; } }; var days, goLive, hours, intervalId, minutes, seconds; goLive = function() { $(".countdown_timer").hide(); return $(".live_now").show(); }; days = void 0; hours = void 0; minutes = void 0; seconds = void 0; intervalId = void 0; return $.ajax({ url: "http://example.org/script/next.json", dataType: "json", success: function(data) { var seconds_till; $("#churchonline_counter").show(); if (typeof data.current_timestamp !== "undefined") { return goLive(); } else if (typeof data.next_timestamp !== "undefined") { seconds_till = data.next_timestamp - (new Date().getTime() / 1000); hours = Math.floor((seconds_till % 86400) / 3600); minutes = Math.floor((seconds_till % 3600) / 60); seconds = Math.floor(seconds_till % 60); return intervalId = setInterval(function() { if (--seconds < 0) { seconds = 59; if (--minutes < 0) { minutes = 59; if (--hours < 0) { hours = 23; } } } $(".counter_h").html((hours.toString().length < 2 ? "0" + hours : hours)); $(".counter_m").html((minutes.toString().length < 2 ? "0" + minutes : minutes)); $(".counter_s").html((seconds.toString().length < 2 ? "0" + seconds : seconds)); if (seconds === 0 && minutes === 0 && hours === 0) { goLive(); return clearInterval(intervalId); } }, 1000); } } });});\[/code\]JSON: \[code\]{"next_timestamp":1356741640,"next_duration":3600,"next_title":"Title","next_description":"Description"}\[/code\]My question is: how do I get the LIVE NOW div to stay active for the "next_duration" stated in the JSON line of code? It interprets the JSON just fine, counts down perfectly, displays the hidden div at the perfect time, then it just drops off when I refresh and doesn't hold the hidden div for the duration before it goes into refreshing the countdown timer again. Additionally, afterwards the initial countdown and refreshing the page, the countdown does not work properly... It just begins counting down from 24 hours every time you refresh the page. It doesn't pick up where it left off... ?
 
Back
Top