java gurus : very simple java countdown required - please help

Applications Grid / Reports
#1

hi, this may look crazy, what i want is a simple live counting only seconds. 59, 58, 57, 56, 55… until 0 to load when the grid is loading up

i have refresh interval 60 seconds, this will give impression to end user that page will be refreshed

i got many codes from dynamic drive site and so, but don’t know where or how to apply such to the grid

tried to use gif image instead but it is cached so counting is not accurate

this countdown should work when the grid is starting and stops on number 0 (page will be refreshed anyway)

it is simple if using normal php pages but don’t know to do it in sc

please give a hint if possible, thanks in advanced

#2

this is an example of the required, anybody knows how to use it with grid? i want to output the result to global variable and add it in header so it will load onScriptInit and output the counter to header to get new countdown once the refresh is being commit

<script type = "text/javascript">
/*author Philip M. 2010*/

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs)-1;
ticker = setInterval("tick()",1000);   // every second
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
// startTimer(60);  // remove forward slashes in front of startTimer to repeat if required
}

document.getElementById("countdown").innerHTML = secs;
}

startTimer(60);  // 60 seconds 

</script>

<span id="countdown" style="font-weight: bold;">60</span>
#3

Just create a new header template and put your stuff in it.
Here is an example how it could look like.


<script type = "text/javascript">
<script type = "text/javascript">
/*author Philip M. 2010*/

var timeInSecs;
var ticker;

function startTimer(secs)
{
	timeInSecs = parseInt(secs)-1;
	ticker = setInterval("tick()",1000);   // every second
}

function tick()
{
	var secs = timeInSecs;
	if (secs>0)
	{
		timeInSecs--;
	}
	else
	{
		clearInterval(ticker); // stop counting at zero
		// startTimer(60);  // remove forward slashes in front of startTimer to repeat if required
	}

	document.getElementById("countdown").innerHTML = 'Next refresh in '+secs+' seconds!';
}

//startTimer(60);  // 60 seconds 

</script>

<style>
	#lin1_col1 { padding-left:9px; padding-top:7px;  height:27px; overflow:hidden; text-align:left;}			 
	#lin1_col2 { padding-right:9px; padding-top:7px; height:27px; text-align:right; overflow:hidden;   font-size:12px; font-weight:normal;}
</style>

<div style="width: 100%">
	<div {NM_CSS_FUN_CAB} style="height:11px; display: block; border-width:0px; "></div>
	<div style="height:37px; border-width:0px 0px 1px 0px;  border-style: dashed; border-color:#ddd; display: block">
		<table style="width:100%; border-collapse:collapse; padding:0;">
			<tr>
				<td id="lin1_col1" {NM_CSS_CAB}><span id="countdown" style="font-weight: bold; color: red">Next refresh in 60 seconds</span></td>
				<td id="lin1_col2" {NM_CSS_CAB}><span>{LIN1_COL2}</span></td>
			</tr>
		</table>		 
	</div>
</div>

<script>startTimer(60);</script>

jsb

#4

awesome! works ok dude, guru business indeed

i also added

if (secs <5 ) {
document.getElementById(“countdown”).style.color = “red”;
}
and looks perfect and colorize it red when reachs to 5

one more luxury step, can we make it blink as well as red if below 5 seconds? i tried like:

document.getElementById(“countdown”).style.color = “red” .style.trnsission = “blink”; // but didn’t work // i wouldn’t expect it to work this way though (looool)

#5

BLINK?!?!?! You don’t really want to do this, do you? :slight_smile:

If you insist on it, grab one of those ‘blink’ css classes you find everywhere on the internet,
copy it into your header template and name it ‘.blink’.
When time has come just fire a: document.getElementById(‘countdown’).className = ‘blink’;

jsb

#6

why not boss? is it a monster that will bite!? well, will give it a try and see :slight_smile:
appreciated your time and support indeed
cheers