Announcement

Collapse
No announcement yet.

java gurus : very simple java countdown required - please help

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • java gurus : very simple java countdown required - please help

    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
    Last edited by MikeDE; 11-22-2014, 06:10 PM.

  • #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


    Code:
    <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>

    Comment


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

      Code:
      <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

      Comment


      • #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)

        Comment


        • #5
          BLINK?!?!?! You don't really want to do this, do you? :-)

          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

          Comment


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

            Comment

            Working...
            X