Tag Archives: timer

JavaScript: Execute a Function every Couple of Seconds with setInterval CodeUnit 14 NOV 2011

With pages being very much dynamic these days, developers often need a page to do something every now and then, so as to keep the viewer’s attention or to update the page without having to do a page reload – or perhaps just reload the page every couple of seconds!

Anyway, a simple way of achieving this is through the very useful Javascript Window setInterval() method, which basically calls a function or evaluates an expression at specified intervals (in milliseconds).

Once initiated, the setInterval() method will keep executing until the timer is cleared with a call to clearInterval() – or the window itself is actually closed!

Note the ID value returned by the call to setInterval – you’ll need this parameter if you want to put a stop to it with clearInterval!

Supported by all major browsers, the syntax to run the method is:

setInterval(code,millisec);

The following is a simple example that displays the time on a page and then subsequently updates that time every second, with a control button to stop the clock.

<html>
<body>
<input type=”text” id=”clock” />
<script language=javascript>
var int=self.setInterval(function(){clock();},1000);
function clock()
  {
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById(“clock”).value=t;
  }
</script>
</form>
<button onclick=”int=window.clearInterval(int)”>Stop</button>
</body>
</html>

Nifty

Android App: UltraChron Stopwatch Lite CodeUnit 02 NOV 2011

One of the most useful (and most used) apps on my Android-powered Samsung Galaxy Ace is UltraChron Stopwatch Lite, developed by TheSpinningHead. What it is, is a fantastically easy to use, responsive stopwatch and timer application.

Although perhaps a little garish in design, the stopwatch and timers are very configurable, features a voice to count down those important bits, the ability to capture lap times and create timed histories thanks to its editable descriptions. It also features persistent notifications and has the ability to wake the phone, meaning that you don’t have to worry about losing your timer or stopwatch after your screen lock saver kicks in!

Very nice, very easy to use, and most importantly of all, works damn well, making it well worth your while to install on your device. (Works a charm in the kitchen for cooking purposes!)

Anyway, search for UltraChron in the market place to download and install!

jQuery: Show a Operation Status bar which Disappears after a Couple of Seconds CodeUnit 03 JUN 2011

Operation or Message status bars are useful creatures when you want to indicate to a user that their action (perhaps AJAX driven) either succeeded or failed. Popping one up on the screen, setting its colours accordingly and displaying the message before making it disappear again after a couple of seconds becomes pretty trivial when using jQuery.

So here is one way you could do it.

As part of your CSS, define a success-notice and error-notice class which basically sets the foreground and background colours as you would like them to appear on your page. In my case, I like using:

.error-notice {
    padding-left: 10px;
    padding-right: 10px;
    background-color: #f2baba;
    color: #990000;
    border: 2px dashed #b81616;
    font-weight: normal;
    font-size: 0.95em;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.success-notice {
    padding-left: 10px;
    padding-right: 10px;
    background-color: #baf2bb;
    color: #049900;
    border: 2px dashed #15a612;
    font-weight: normal;
    font-size: 0.95em;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

Then in your code, pop in a hidden element and give it a nice and unique element ID which you can use when it comes to the jQuery bit. For example, you could put down something like <div id=”ajax-status-message” style=”display: none;”> </div>

And now for the fun bit. At the end of your operational javascript, decide on the appropriate status message which is to be returned and then add following call into your code:

//if the operation failed
$('#ajax-status-message').html(message).removeClass('success-notice').addClass('error-notice').show().delay(5000).fadeOut();
//if the operation succeeded
$('#ajax-status-message').html(message).removeClass('error-notice').addClass('success-notice').show().delay(5000).fadeOut();

What the above does, is basically locate the existing message div, set the contained text to your status message, strip the existing CSS class if already attached and attach the correct CSS class based on whether or not you decided that the operation succeeded or failed. Then unhide it so that the user can see it and after five seconds, cause it to gracefully fade out of view.

Nifty.