Disclaimer

Instructions for implementing javascript timeout warning features for WebVoyage. Use at your own risk. TCC is not responsible for damage or problems caused by the use of these JavaScripts. No warranties or guarantees of any kind are implied or assumed.

WebVoyáge Timeout Warning, version 2.2

Version 1.0, using popup windows, can be found here. Version 1.0 is not recommended because pop-up blockers will block the warning windows!

(2007-10-29) Thanks to Yan Yi Lee at Wagner College for pointing out that Internet Explorer 7 does not allow javascript control of the status bar by default. Version 2.2 allows the session timeout counter and message to be displyed in the title bar after the title.

(2006-02-23) Thanks to Laura Guy at Colorado School of Mines for alerting me to problems encountered when accessing WebVoyage History. I violated a basic rule of programming (test for an object before using it!!), but it has been remedied. The real problem here is that the WebVoyage History page has an unterminated <form> tag.

(2005-12-09) Thanks to Wally Grotophorst at George Mason University for alerting me to problems encountered with sorting result lists in new versions of Voyager. The instructions have been revised to reflect a fix for the problem.

These scripts are meant to be used with the WebVoyage product by Endeavor Systems, Inc.™ WebVoyage has a timeout "feature" in which the product, unbeknownst to the user, will end the user's session after a period of time set in the Timeout variable in voyager.ini. When the user attempts to use the product after the designated time, they are sent to an error page from which they must restart the product.

The scripts have been rewritten to use DHTML instead of popup windows because DHTML is more commonplace and more browsers now support DHTML functionality and because most users have been forced to block popup windows. The new scripts, just like the old scripts, will not work in browsers with JavaScript disabled. Users without JavaScript will experience the default WebVoyage behavior.

The JavaScripts and stylesheets enclosed in timer.zip are meant to warn the user before the end of the session timeout, giving the user a chance to restart the timer by refreshing the page. If the user takes no action before the session timeout, the warning dialog informs the user, giving them a chance to begin a new search or to log in. The session counts down in the status bar of the user's browser, so users can see how much time is left at any time (provided their status bar is active and allows JavaScript updates.)

There are three folders in the timer.zip package, but only two of them are required. The files in the src folder are made available for users who wish to look at the code in a more readable format. The files in the src folder are not required to make the program work.

You can see these JavaScripts in action at http://library.tccd.edu. (Click "Library Catalog" and wait 12 minutes... ;-)

Instructions

  1. Download the JavaScripts and stylesheet at timer.zip.

  2. Unzip timer.zip. Inside will be three directories and a GIF image:
    • src - contains JavaScripts with comments for you to peruse at your leisure.
    • js - contains compact versions of the JavaScripts for faster downloads and runtimes.
    • css - contains the stylesheet to format the warning box.
    • load.gif - a 1x1 pixel image.
      See, it's right here-->
      Here it is with a 2 pixel border-->

  3. Add the folder called "js" to your html folder (located by default at /m1/voyager/xxxdb/webvoyage/html).
      The js directory contains two files:
    1. "timer.js" controls the timer and display.
    2. "zdragdroplib.js" allows dragging the warning dialog box.

  4. Add the folder called "css" to your html folder (located by default at /m1/voyager/xxxdb/webvoyage/html).
    The css directory contains one file: "timer.css" is the stylesheet definition for the warning dialog box.

  5. Change the variables to suit your needs.
    • In the "timer.js" script:
      1. Change minutes to match your Webvoyage timeout time. (We set it to one minute before our WebVoyage timeout because the header image may load later than the WebVoyage timer depending on the connection. WebVoyage max is 15 minutes, ours is set to 14 minutes.)
      2. Change remindTime to the number of seconds left in the countdown when the popup will appear. (We set it ours so the warning will appear 120 seconds (2 minutes) before the session times out.)
      3. Change newSearchURL to the relative path of your new search page. (By default, this is /cgi-bin/Pwebrecon.cgi?DB=local&PAGE=First.)
      4. Change newLoginURL to the relative path of your patron login page. (By default, this is /cgi-bin/Pwebrecon.cgi?PAGE=LOGON.)
      5. Change newSessionURL to the relative path of your WebVoyage home page. (By default, this is /webvoy.htm.)
      6. Change warningText to the text that will warn the user that the session will soon time out.
      7. Change timeoutText to the text that will alert the user that the session has timed out.
      8. Set statusbar to true to attempt to show the counter in the user's status bar.
      9. Set titlebar to true to show the counter in the user's title bar.
    • In the "timer.css" file, you can change any of the div element location settings, but:
        For #warningDiv:
      • the id selector name for the warning div element must remain warningDiv
      • the position attribute should remain absolute
      • the visibility attribute should remain hidden
        For #warningHeader:
      • the id selector name for the warning header div element must remain warningHeader


  6. Add code to your header.htm. (Located by default at /m1/voyager/xxxdb/etc/webvoyage/)
    • Add these lines between the <CENTER></CENTER> tags:
      1. <link rel="stylesheet" type="text/css" href="/css/timer.css">
      2. <script type="text/javascript" src="/js/timer.js" /></script>
      3. <script type="text/javascript" src="/js/zdragdroplib.js"></script>

    The following is the default WebVoyage header.htm with the changes above in boldface type:
    (you can copy and paste this into your header.htm file)
    <!-- Start of HTML body portion -->
    <CENTER>
    <link rel="stylesheet" type="text/css" href="/css/timer.css">
    <script type="text/javascript" src="/js/timer.js" /></script>
    <script type="text/javascript" src="/js/zdragdroplib.js"></script>
    </CENTER>


  7. Add code to your footer.htm (Located by default at /m1/voyager/xxxdb/etc/webvoyage/)
    • Add these lines after <!-- End of HTML footer portion -->
      1. <script type="text/javascript">
           <!--//
              document.write(getWarning());
           //-->
        </script>
      2. <div id="warningDiv"></div>
      3. <img src="/images/load.gif" onLoad="initTimer();">

    The following is the default WebVoyage footer.htm with the changes above in boldface type:
    (you can copy and paste this into your footer.htm file)
    <!-- End of HTML footer portion -->
    <script type="text/javascript">
       <!--//
          document.write(getWarning());
       //-->
    </script>
    <div id="warningDiv"></div>
    <img src="/images/load.gif" onLoad="initTimer();">

Version History

    v2.1 (2006-02-23)
  • Declared undeclared variables to prevent JavaScript Warnings
  • Test for document.warningForm and document.warningForm.timeRemaining in startTimer(). This prevents errors when accessing Endeavor™'s WebVoyage History because the History Page has an unterminated <form> tag. (<form> but no </form>).
  • Removed language='JavaScript' attribute from <script> tags in the instructions. The language attribute has been deprecated in favor of the type='text/javascript' attribute.
  • Corrected function call in which newLoginURL variable was not being used by the New Session Login button.

v2.0 (2005-12-09)
In Voyager 5, for sorting a results list, Endeavor™ uses a JavaScript to call a function (doSubmit(f)) that submits the form. To call the function, the Endeavor™ script refers to 2 forms by number, the number being the order in which they load on the page. (That is document.forms[0] and document.forms[2]).
Note: Properly done, these forms would be referred to by name (document.forms['querybox']), but since document.forms[0] and document.forms[2] have the same name (querybox), they should be referred to by ID. For example, document.getElementById('querybox1') and document.getElementById('querybox2').

In the original instructions for the timer scripts, the timer scripts were loaded and called at the top of the page. Because of this, the form for the script became document.forms[0] and subsequent forms received a number one higher than before. (that is, document.forms[1] and document.forms[3]).

To fix this problem, simply move the timer calls to getWarning() and initTimer() to the bottom of the page so they are called after the other forms are loaded.

Troubleshooting

Questions can be sent to Jim Robinson at Tarrant County College District

Some hints about debugging javascripts:

  • Download a Firefox browser (http://www.mozilla.org) and open the JavaScript console under Tools.
  • Download an Opera browser (http://www.opera.com) and turn on "Report JavaScript Errors".
  • Use object detection instead of browser detection and element IDs instead of names or array positions!