Category: JS

Posted on

Javascript Countdown with PHP Fall Back

Perhaps you have an event that happens on your webpage at a certain time, or you want to give a countdown to when the world ends. With this piece of JavaScript you can do this, and a PHP fall back will allow non JavaScript enabled browsers to still view the relevant information.

Let’s start with the JavaScript.

One of the issues here is that we don’t just want to display how much time is left, but also update that display continuously to provide our timer. There are two JavaScript functions that provide this ability, setTimeout which evaluates a function after a set amount of time and setInterval which continuously evaluates a function after a set amount of time.

Another issue we have to look out for is timing and accuracy. The examples on the internet all ran a small amount of code and then ran setTimeout after one second or very close to it. The problem is we don’t know exactly how long the code we are running takes, and this could and is different on every computer that runs the code.

So we need a slightly better approach. Here I’ve assigned a global variable which holds the time when the timer is complete and five times every second the display is updated to show the correct value. Perhaps we can take this further and set our interval uniquely each time based on millisecond comparison of the time? I leave that up to the reader.

The code is fairly self explanatory. The bulk of it is formating code to make the countdown look pretty. I’m not even sure it’s 100%. Onward with the code.

var launchtime = '';

// converts seconds into seconds, minutes, hours, days
function sec_to(secs, num1, num2) {
  return ((Math.floor(secs/num1))%num2).toString();
}

// Our actual function, cb_id is the id of the element to modify
// secs is the time until the event, and message is displayed after time has elapsed.
function countback(cb_id, secs, message) {
  // Our time initialization
  timenow = Math.floor(new Date().getTime() / 1000);
  if(launchtime == '') launchtime = timenow + secs;
  secs = launchtime - timenow;

  // We set up our default text strings
  var DisplayStr = '';
  if(message == undefined) message = 'Times Up!';

  // if we are there display our message
  if (secs < 0) {
    document.getElementById(cb_id).innerHTML = message;
    return;
  }

  // breakdown our time.
  var days = sec_to(secs,86400,100000);
  var hours = sec_to(secs,3600,24);
  var minutes = sec_to(secs,60,60);
  var seconds = sec_to(secs,1,60);

  // just some fancy code to make the time look pretty
  if (days > 0) DisplayStr += days + ' Day';
  if (days > 1) DisplayStr += 's';

  if (days > 0) DisplayStr += ', ';
  if (hours > 0) DisplayStr += hours + ' Hour';
  if (hours > 1) DisplayStr += 's';

  if (hours > 0) DisplayStr += ', ';
  if (minutes > 0) DisplayStr += minutes + ' Minute';
  if (minutes > 1) DisplayStr += 's';

  if (minutes > 0) DisplayStr += ', ';
  if (seconds > 0) DisplayStr += seconds + ' Second';
  if (seconds > 1) DisplayStr += 's';
  
  // Display our pretty time string
  document.getElementById(cb_id).innerHTML = DisplayStr;

  // Run this function five times every second  
  setTimeout("countback(\"countback\"," + (secs) + ",\"" + (message) + "\")", 200);
}

Now for the people who prefer a server side approach. This function pretty much mirrors the JavaScript approach. The one occlusion is the auto-updating feature of the client side script. Our only real recourse here is a meta refresh tag on the top of our page. But at the very least it provides the proper time.

Here is the code:

<?php 

function countback($seconds, $message = 'Times Up!') {
  $displaystr = '';
  if ($seconds < 0) return($message);
  
  $days = (floor($seconds/86400))%100000;
  $hours = (floor($seconds/3600))%24;
  $minutes = (floor($seconds/60))%60;
  $seconds = $seconds%60;

  if ($days > 0) $displaystr .= $days . ' Day';
  if ($days > 1) $displaystr .= 's';

  if ($days > 0) $displaystr .= ', ';
  if ($hours > 0) $displaystr .= $hours . ' Hour';
  if ($hours > 1) $displaystr .= 's';

  if ($hours > 0) $displaystr .= ', ';
  if ($minutes > 0) $displaystr .= $minutes . ' Minute';
  if ($minutes > 1) $displaystr .= 's';

  if ($minutes > 0) $displaystr .= ', ';
  if ($seconds > 0) $displaystr .= $seconds . ' Second';
  if ($seconds > 1) $displaystr .= 's';

  return($displaystr);
}

?>

That’s it in a nutshell. You can see a working example of it here. I’d like to thank Robert Hashemain for his javascript countdown which served as the inspiration for mine.

Posted on

Javascript Error Check for File Uploads

If your uploading a file of any decent size it will only annoy the user if they upload something wrong and get told afterwards. What we’d like to do is scan that file and make sure it’s kosher before it’s even uploaded, but unfortunately that isn’t possible with Javascript due to built in security restrictions.

Really all we know about that file is it’s name before we receive it. The only thing we can do is check the file extension to see if it is aligned with our wishes. Included here is a very simple file upload form with minimal PHP and the proper Javascript to complete this check.

Here is the HTML/Javascript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Jpeg Upload</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" language="JavaScript"><!--
    function check_extension(id) {
      var filename = document.getElementById(id).value;
      var fileext = filename.substring(filename.lastIndexOf('.')+1).toLowerCase();
      var extension = new Array('jpg','jpeg');

       for(var i = 0; i < extension.length; i++) {
         if(fileext == extension[i]) { return true; }
       }
       alert("Your upload form contains an unapproved file name.");
       return false;
    }
  //--></script>
</head>

<body>

  <form enctype="multipart/form-data" method="post" action="index.php" onsubmit="return check_extension('image_file');">
    <label for="image_file">Jpeg Image to upload: <input type="file" name="image_file" id="image_file" /></label>
    <input type="submit" name="submit" value="upload" />
  </form>

<body>
<html>

It should be fairly straightforward. In the form remember to set the onsubmit=”return check_extension(‘image_file’);” where image_file is the name of your file input. You can modify extensions in the Javascript to your preferences.

For completeness here is a working example and the source.