Tech Blog

WebVoyage 7 (Tomcat) Timeout Message Alternative

Avatarby Jim Robinson For codeshare migration September 29, 2008 (Updated: December 13, 2018)
VOYAGER
  • DescriptionThis is an alternative to the intrusive default timeout alert message. When the default popup appears, it takes over all browser activity until the user dismisses the message. It doesn’t give the user any instruction as to how to continue the session or how to dismiss the session and start a new one.
    With this revised version, when the timer runs out, a draggable message appears that allows the user to refresh the session or start a new session.
  • Author: Jim Robinson
  • Additional author(s):
  • Institution: Tarrant County College District (Not State Library of Tasmania… what a commute!)
  • Year: 2008
  • License: BSD style
  • Short description: Use, modification and distribution of the code are permitted provided the copyright notice, list of conditions and disclaimer appear in all related material.
  • Link to terms: Detailed license terms
  • Skill required for using this code:
    basic

State

Stable

Programming language

DHTML (JavaScript + CSS)

Software requirements

WebVoyage 7 (Tomcat)

Author(s) homepage

http://library.tccd.edu

http://lib-serv.tccd.edu/code/

Download

tcc_timeout_javascript.js

tcc_timeout_stylesheet.css

Working example

http://library.tccd.edu/vwebv/searchBasic

Changes

Version 1.1 ….

Version 1.1 released 2009-MAR-30.

Released 1.0

Release notes

1.1 displays the remaining seconds in the window.

1.0 is the initial release

Installation instructions

This process requires creation of or changes to 4 files:

  • A stylesheet
  • A JavaScript
  • /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/xsl/pageFacets/footer.xsl
  • /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/xsl/pageTools/frameWorks.xslStep 1: The Stylesheet. Create your own css file (ours is called tcc_timeout_stylesheet.css) and save it in /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/css/:
    /*********************** Timeout Message ***********************/
#tcc_timeout_container {
    position:absolute;
    width:300px;
    height:120px;
    /* position set in javascript function call in footer.xsl */
    
    border:2px solid #152e4c;
    background-color:#FFC;
    font: 12px sans-serif;
    opacity: .85; /* Standard */
    filter: alpha(opacity=85); /* MSIE */
    
    z-index:5;
    display:none;
}
 
#tcc_timeout_title {
    background-color:#152e4c;
    color:#FFC;
    text-align:center;
    cursor:move;
    height:30px;
    font-weight:bold;
    padding-top:5px;
}
 
#tcc_timeout_message{
    text-align:center;
    height:30px;
    font-weight:bold;
    border-bottom:1px solid #152e4c;
    padding-top:10px;
}
 
#tcc_timeout_page_refresh {
    float:left;
    padding:10px 1px 2px 10px;
}
 
#tcc_timeout_session_refresh {
    float:right;
    padding:10px 10px 2px 1px;
}
 
#tcc_timeout_page_refresh a, #tcc_timeout_session_refresh a {
    background-color: #e9daaa;
    color: #000;
    font-weight:bold;
    border-style:outset;
    border-width:2px;
    border-top-color: #CECECE;
    border-right-color: #000;
    border-bottom-color: #000;
    border-left-color: #CECECE;
}
 
#tcc_timeout_page_refresh a:hover, #tcc_timeout_session_refresh a:hover {
    border-style:inset;
    text-decoration:none;
    background-color: #ffc;
    border-top-color: #000;
    border-right-color: #CECECE;
    border-bottom-color: #CECECE;
    border-left-color: #000;
}

     

Step 2: The JavaScript. In your own JavaScript file (ours is called tcc_timeout_javascript.js), add the following functions and save the file in /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/jscripts/:

/****************************************************************************
 * Timeout Script
*****************************************************************************/
function tcc_display_timeout(msg) {
    //if(msg==null || msg=='' || msg=='undefined') msg='Your session will end soon.';
    seconds = seconds > 0 ? seconds-1 : 0;
    msg = "Your session will end in " + seconds + " seconds.";
    document.getElementById('tcc_timeout_message').innerHTML=msg;
    document.getElementById('tcc_timeout_container').style.display='inline';
    setTimeout("tcc_display_timeout()",1000);
}
 
/*****************************************************************************
*   Drag and Drop
*****************************************************************************/
var tccDrag = {
    object : null,
 
    init : function(baseElement, handle, startX, startY) {
        handle.onmousedown = tccDrag.start;
        handle.base = baseElement;
        
        handle.base.style.left = startX ? startX : '0px';
        handle.base.style.top  = startY ? startY : '0px';
        
        handle.base.doDragStart = new Function();
        handle.base.doDragEnd   = new Function();
        handle.base.doDrag      = new Function();
    },
 
    start : function(event) {
        tccDrag.object = this;
        event = tccDrag.getEvent(event);
        var x = parseInt(tccDrag.object.base.style.left);
        var y = parseInt(tccDrag.object.base.style.top);
        tccDrag.object.base.doDragStart(x, y);
 
        tccDrag.object.lastMouseX = event.clientX;
        tccDrag.object.lastMouseY = event.clientY;
 
        document.onmousemove = tccDrag.drag;
        document.onmouseup   = tccDrag.end;
 
        return false;
    },
 
    drag : function(event) {
        event = tccDrag.getEvent(event);
 
        var mouseY = event.clientY;
        var mouseX = event.clientX;
        var x = parseInt(tccDrag.object.base.style.left);
        var y = parseInt(tccDrag.object.base.style.top);
        var deltaX = x + (mouseX - tccDrag.object.lastMouseX);
        var deltaY = y + (mouseY - tccDrag.object.lastMouseY);
 
        tccDrag.object.base.style["left"] = deltaX + "px";
        tccDrag.object.base.style["top"]  = deltaY + "px";
        tccDrag.object.lastMouseX = mouseX;
        tccDrag.object.lastMouseY = mouseY;
 
        tccDrag.object.base.doDrag(deltaX, deltaY);
        return false;
    },
 
    end : function() {
        document.onmousemove = null;
        document.onmouseup   = null;
        var x = parseInt(tccDrag.object.base.style["left"]);
        var y = parseInt(tccDrag.object.base.style["top"]);
        tccDrag.object.base.doDragEnd(x,y);
        tccDrag.object = null;
    },
 
    getEvent : function(event) {
        if (typeof event == 'undefined') event = window.event;
        if (typeof event.layerX == 'undefined') event.layerX = event.offsetX;
        if (typeof event.layerY == 'undefined') event.layerY = event.offsetY;
        return event;
    }
};

 
Step 3: The Footer. Now, create the message. In /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/xsl/pageFacets/footer.xsl, add the timeout container between </xsl:for-each> and </xsl:template>:

</xsl:for-each> <!-- This already exists -->
   <!-- ######### Timeout ############ -->
    <div id='tcc_timeout_container'>
         <div id='tcc_timeout_title'>Session Timeout</div>
         <div id='tcc_timeout_message'></div>
         <div id='tcc_timeout_page_refresh'>
            <script type='text/javascript'>
                document.write('<a href="' + window.location.href + '">Continue Session</a>');
            </script>
         </div>
         <div id='tcc_timeout_session_refresh'>
            <a href='/vwebv/exit.do'>New Session</a>
         </div>
      </div>
      <script type='text/javascript'>
         var dragBase = document.getElementById('tcc_timeout_container');
         var dragHandle = document.getElementById('tcc_timeout_title');
         tccDrag.init(dragBase, dragHandle, '400px', '250px');
      </script>
   <!-- ######### Timeout ############ -->
</xsl:template><!-- This already exists -->

Step 4: The FrameWork. Revise the Ex libris timeout call and add your CSS and JavaScript files.

In /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ui/skin/xsl/pageTools/frameWork.xsl, add the following (changes are boldface):

<script type=”text/javascript” src=”{$jscript-loc}pageInputFocus.js”/>
<script type=”text/javascript” src=”{$jscript-loc}tcc_timeout_javascript.js”/>

…more code here…

<style type=”text/css” media=”screen,print”>@import “<xsl:value-of select=”$css-loc”/>tcc_timeout_stylesheet.css”;</style>

<xsl:comment><![CDATA[[if IE]> <style type=”text/css” media=”screen,print”>@import “ui/en_US/css/ieFixes.css”;</style><![endif]]]></xsl:comment>

In the same file, change the Ex Libris timeout call (changes are boldface):

<script type="text/javascript">
var msg;
var timeOut;
var seconds;
function timedMsg(time, grace, txtMsg)
{
msg = txtMsg;
timeOut = (time - grace) * 60000;
seconds = grace * 60;
//setTimeout("alert(msg)", timeOut);
setTimeout("tcc_display_timeout(msg)",timeOut);
}
</script>

Download Firefox

Download, install, and use Firebug

Changes to existing files are in boldface. Find the text that is not bold, then make the changes as indicated.

You’re backing up all your files before making changes to them, right?

Don’t forget to change xxxdb, skin, and anything else in bold.

If you’ve named your stylesheet something other than tcc_timeout_stylesheet.css, make sure you’re pointing to the right file in the last step.

The same goes for your JavaScript file.

TO DO list

None at the moment.

Known issues

No known issues

One Reply to “WebVoyage 7 (Tomcat) Timeout Message Alternative”

Leave a Reply