views:

106

answers:

0

I wrote a Jquery function that blacks out the screen after a certain amount of inactivity, creates a pop-up that allows the user to click a button to stay logged in, and logs them out (closing the application window) if they do not respond in time.

The environment is ASP.NET (VB). We don't technically use master pages, but we do have a parent page in which our header, footer and nav reside, and my Jquery code is called from that window, loaded via an IFrame.

We're using txControl's ActiveX version as our text editor built into the app. We're going to be upgrading very soon, but for now I've got this one classic ASP page that I need to integrate my timeout code into, but when the timeout code kicks in, the ASP file does not "black out" like the rest of the child windows, and the button to continue the session is invisible, ending up behind the ASP page, I'm guessing.

Here is my main timeout function, which is in a .js file and is inserted into the parent window via a script tag:

function pop_init() {
    // show modal div
    $("html").css("overflow", "hidden");
    $("body").append("<div id='popup_overlay'></div><div id='popup_window'></div>");
    //$("#popup_overlay").click(popup_remove);  // removed to make sure user clicks button to continue session.
    $("#popup_overlay").addClass("popup_overlayBG");
    $("#popup_overlay").fadeIn("slow");

    // build warning box
    $("#popup_window").append("<h1>Warning!!!</h1>");
    $("#popup_window").append("<p id='popup_message'><center>Your session is about to expire.  Please click the button below to continue working without losing your session.</center></p>");
    $("#popup_window").append("<div class='buttons'><center><button id='continue' class='positive' type='submit'><img src='images/green-checkmark.png' alt=''/> Continue Working</button></center></div>");

    // attach action to button
    $("#continue").click(session_refresh);

    // display warning window
    popup_position(400, 300);
    $("#popup_window").css({ display: "block" }); //for safari using css instead of show
    $("#continue").focus();
    $("#continue").blur();

    // set pop-up timeout
    SESSION_ALIVE = false;
    window.setTimeout(popup_expired, WARNING_TIME);
}

I've attached "stay-alive" code to mousedown, keydown and blur events in the child windows like this:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        window.parent.reportChildActivity();
    });
</script>
<script type="text/javascript">
    $(document).bind("mousedown keydown blur", function() {        
            window.parent.reportChildActivity();
    });
</script>

I tried adding the following to my ASP file, only to get the result you see in the attached image:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript" language="javascript"></script>
<script src="JScripts/RC_jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        window.parent.reportChildActivity();
    });
</script>
<script type="text/javascript">
    $(document).bind("mousedown keydown blur", function() {
        window.parent.reportChildActivity();
    });
</script>

Can anyone tell me what I need to do to get the Jquery timeout div to overlay the entire window as designed? Thanks for your time and any assistance you may be able to provide!

ShouldLook DoesLook Top pic is the desired result, and the result on all the aspx pages. Bottom pic is what I'm getting on the classic asp page.

EDIT: Well, I thought to wrap all the essential parts of the ASP page in a div (called "divPage") and then hide the div. It works like a charm if I call "$('#divPage').hide();" from a script in the head section of the ASP file - it hides the div as soon as the document loads. However, I need conditional hiding, so I tried to put the same code in my Jquery file, in the pop_init function, and although the rest of the code in that function executes flawlessly for me, the code to hide divPage is doing nothing. Any ideas why I'd get different results from the iniline code, versus the function included in the RC_Jquery.js file?