Home arrow JavaScript arrow Page 7 - Using Timers in JavaScript

A Long Wait - JavaScript

JavaScript's Window object comes with four methods that you can use to create timed or looping events in your Web pages. In this article, I'll introduce you to them, and also show you a few examples of how they can be used in different situations.

TABLE OF CONTENTS:
  1. Using Timers in JavaScript
  2. Window Washer
  3. New Year Blues
  4. A Decent Interval
  5. Turning Up the Volume
  6. Sliding Around
  7. A Long Wait
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 113
January 28, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Finally, I'll wrap things up with a more practical example, one which might come in handy in your Web development. In this next example, the task is to offer the user a file upload box, which he or she can use to upload files to a Web site. Once the user selects a file for upload and initiates the transfer, a dialog box should pop up with a message asking the user to be patient. Once the file upload completes, the dialog box (window) should automatically disappear.

Now, there are a number of ways to implement this. Here's how I'm going to do it:

1. Write the code to display a form for file upload, as well as the code to accept the file and transfer it to a data directory on the server. This will be implemented in PHP.

2. Add code to the script above to throw up a pop-up window once the upload begins.

3. Add code to the pop-up window to keep polling the parent window for file upload status. Once the upload has finished (signified by the parent browser window loading a new URL), the pop-up window will automatically close.

First, the code for the form:


<html>
<head>
</head>
<body background="images/bkgd.gif" leftmargin="0" rightmargin="0"
marginheight
="0" marginwidth="0" topmargin="0">
<form action="upload.php" method="POST"
onSubmit
="window.open('wait.html','resultsWindow','toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,
resizable=no,copyhistory=no,
width=500,height=400');" 
enctype="multipart/form-data" >
Attach File
<br>
<
input name="file" type="file" size="30" maxlength="50">
 
<br>
<
input type="submit" value="Submit">
</
body>
</html>

Now, the server-side PHP script which processes the file submitted by the user through the form above:


<?php
// upload.php
// upload the file to the server
if($_FILES['file'][name] != "") 
{
 if (is_uploaded_file($_FILES['file']['tmp_name'])) 
 {
  // if the file is clean, move it to final location
        if(file_exists($_FILES['file']['tmp_name'])) 
  {
   // check the size of the file
      if($_FILES['file']['size'] < $file_limit) 
   {
    // get the file name
       $NAME = $_FILES['file']['name'];
    // copy it to data directory
        if(copy($_FILES['file']['tmp_name'], $UPLOAD_LOCATION.$NAME))
    {
           // send browser to success page
              header("Location: success.php");
     } 
   

  
}
 

}



Once the upload is complete, the script above will redirect the browser to a success page (or an error page, if an error occurred).

Notice in the form that I'm opening a new window when the user clicks the submit button. This new window will show the "be patient" message, and must also keep checking the parent window at pre-defined intervals to see if the transfer is complete. Here's the code:


<html>
<head>
<script language="JavaScript">
<!--
// wait.html
function checkOpenerStatus() {
    
var strOpener opener.location.href;
    
if(strOpener.indexOf("success.php") != -||
strOpener
.indexOf("error.php") != -1) {
     
// I am going to close now
     self.close();
    }
}
// -->
</script>
</head>
<
body onLoad="setInterval('checkOpenerStatus()', 1000)">
<
center>
<h1>
Please wait
your upload is being processed!
<br>
This window will close automatically once the upload is complete
.
</h1>
</center>
</
body>
</html>

This script uses the setInterval() method to check the URL of the parent window every second and, when it detects that the parent has gone to the success or error page (indicating that the upload has completed), it automatically terminates itself with the self.close() method.

And that's about all I have time for. Over the course of this article, I introduced you to JavaScript's four timing functions, showing you how to use the setTimeout() and setInterval() methods to call a function once after a pre-defined delay, or repeatedly at a pre-defined interval. That was the easy part, and I followed it up with a bunch of examples designed to showcase some of the things you can do with this power. Among the example applications I built: a browser tickertape, a countdown clock, a timed slideshow, a variable-speed page object, and a polling status window.

I hope you had fun reading this article, and that the examples sparked off some ideas of where you can use these functions in your own scripts. 'Till next time, see ya!

Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article.



 
 
>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: