jensbits.com

Positioning Multiple jQuery UI Dialogs

jen — Fri, 13 Nov 2009 01:29:09 +0000

This post shows one way to position multiple jQuery UI dialogs on the same page. It positions the dialog over the calling button based on the button’s position in the viewport.

The dialog box contents can be placed anywhere in the body. For this example they look like this:


        In id imperdiet justo. Sed eu commodo erat. Nullam euismod dapibus magna a porttitor. Vestibulum odio turpis, ullamcorper eu ullamcorper sit amet, blandit id purus. Suspendisse commodo egestas augue, et fringilla lorem consequat et. Sed volutpat sapien at massa gravida sollicitudin. Nunc ut nibh orci.
        Nam quis odio vel arcu auctor tincidunt. Aenean vulputate, sapien id porttitor placerat, purus magna viverra ligula, eu tristique justo purus sit amet ligula. Etiam viverra, enim in luctus sollicitudin, arcu nulla accumsan quam, ut mattis orci eros at dui.

    Close X



        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam orci eget enim vehicula volutpat. Cras eu tellus quis risus venenatis egestas vitae eget est. Donec nec lorem purus. Duis vitae tortor at lacus placerat rhoncus id sit amet lectus. Suspendisse potenti. Aliquam vitae tortor lorem.
        Proin ac sem magna. Donec interdum iaculis lacinia. Donec placerat malesuada mi, vitae malesuada sapien tincidunt ut. Mauris a nibh arcu. Etiam a magna a ipsum faucibus sollicitudin. Morbi nisl nunc, porttitor vitae suscipit in, rutrum at augue.
        Close X

Not much. Just a little styling for sanity’s sake and lots of Latin. Take note of the id’s. They are helpDialog1 and helpDialog2. The number will be needed later.

Like, now…

$('[id^=helpDialog]').dialog({
                autoOpen: false,
                modal: false,
                width: 300,
                resizable: false,
                show: 'blind',
                hide: 'blind'
            });

The jQuery sets some options for the dialog boxes, and it does this by identifying the dialog boxes with the common part of the id. The ‘^’ means ’starts with’ as in the id starts with helpDialog.

Just like that all the dialogs your heart desires are set and ready to go.

The click function on the help buttons does all the heavy lifting.

$('.help').click(function() {
              //strip off prefix of buttin id to get number for dialog
                var helpBtnIdPrefix = 'helpBtn';
                var helpBtnNum = $(this).attr('id').substring((helpBtnIdPrefix.length));

                //offset returns top and left of element
                var helpBtnOffset = $('#helpBtn' + helpBtnNum).offset();
                //width of element
                var helpBtnWidth = $('#helpBtn' + helpBtnNum).width();
                //width of dialog box
                var dialogWidth = $('#helpDialog' + helpBtnNum).dialog('option', 'width');

                //x and y positions of dialog box
                $('#helpDialog' + helpBtnNum).dialog('option','position',[helpBtnOffset.left+helpBtnWidth-dialogWidth,helpBtnOffset.top-$(window).scrollTop()]);
                $('#helpDialog' + helpBtnNum).dialog('open');
            });

The script starts by stripping off the prefix on the button id to get to the number of the button as it corresponds to the dialog box.

Then it gets the button offset or left and top position on the document. Next, it gets the button’s width. All this is used to properly place the dialog over the button.

The x position of the dialog are set using the button’s left position and width along with the dialog box width. The y position is set by using the button’s top position minus the window scroll position in case the user scrolled down.

After the math, the dialog is opened.

An extra close button was added at the bottom of the dialog box for user convenience.

//added close btn at bottom of dialog
            $('[id^=closeHelp]').click(function() {
                var closeHelpPrefix = 'closeHelp';
                var closeHelpNum = $(this).attr('id').substring((closeHelpPrefix.length));
                $('#helpDialog' + closeHelpNum).dialog('close');
            });

Demo

Download zip of all files

Usual recommended jQuery reading:

Passed the Google Analytics Individual Qualification Test

jen — Fri, 06 Nov 2009 20:39:31 +0000

I took and passed the Google Analytics Individual Qualification test today. It wasn’t too bad but it did require studying unless you dead set on cheating. I studied all the presentations on Google’s Conversion University, running through the more difficult stuff twice (AdWords, e-commerce).

It costs $50 to take. Seems a little steep but I did learn so much more than I would have had I not been so motivated. Meaning: I wasn’t going to waste my $50.

Printing a Dynamically Loaded Iframe with jQuery

jen — Tue, 03 Nov 2009 23:46:26 +0000

This is an example of printing a dynamically loaded iframe on a button click. This is useful for printing specific or generated reports or pages without leaving the current page.

The iframe to be targeted looks like this and can be placed virtually anywhere in the body tag:

The button to be clicked for printing:

Load and print page in iframe

The jQuery on the calling page:

$().ready(function() {

	$('#iframeprintbutton').click(function() {
		$("#iframeprint").attr("src", "iframecontents.htm");
		return false;
     });

});

In the example, that page to be printed is in the same directory of the calling page. Use whatever URL will work for the location of the page you want to print. You can use absolute URLs. For example, http://yoursite.com/yourfile.htm.

All that is needed on the page to be printed is a call to the print function.

You could probably use straight javascript here, but I find jQuery quicker and easier to work with.

Demo

Download zip of all files

Usual recommended jQuery reading:

ColdFusion cfgrid Selected Row Disappearing / Blank in IE

jen — Wed, 28 Oct 2009 13:45:06 +0000

After selecting a row in cfgrid in Internet Explorer, the selected row goes blank or all white. The data is still there and the row is selected, you just can’t tell.

The problem lies in a css file that ColdFusion uses for the cfgrid. According to some other posts on the web, there is some incorrectly commented out css rules. They are commented out with ‘//’ rather than ‘/*…*/’. The file is ext-all.css and on my set up with IIS, I found it at C:\Inetpub\wwwroot\CFIDE\scripts\ajax\resources\ext\css\ext-all.css.

When the comments are correctly marked up, it got better (the text showed up) but the background color did not behave even though I specified the select background color in the cfgrid attributes with selectColor=”#FF3300″. BTW, the selectColor worked for FireFox, IE didn’t seem to care.

My solution (although imperfect) was to edit the ext-all.css by properly commenting out the bad comments and adding my own background color for the selected td. It’s imperfect because it overrides the selectColor in FireFox.

.x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{
	background-color: #316ac5; /* added */
	/*color: white;*/
}

.x-grid-row-selected span, .x-grid-row-selected b, .x-grid-row-selected div, .x-grid-row-selected strong, .x-grid-row-selected i{
	color:white !important;
}

.x-grid-row-selected .x-grid-cell-text{
	/*color: white;*/
}

.x-grid-cell-selected{
	/*color: white;*/
}

.x-grid-cell-selected span{
	/*color: white !important;*/
}

.x-grid-cell-selected .x-grid-cell-text{
	/*color: white;*/
}

Hope this helps someone else and I hope Adobe fixes it.

jQuery.ajax and jQuery.post Form Submit Examples with ColdFusion

jen — Fri, 23 Oct 2009 13:17:30 +0000

This is the same as the previous jquery form submit post that used PHP just flavored with CF this time.

Two jQuery functions that allow for the submission of form are the jQuery.ajax function and the jQuery.post function (there is also jQuery.get but that is not addressed here).

More functionality, along with more complexity, is offered with the .ajax function while the .post function, with its more simple functionality and implementation, will be all that is needed for simple form posts.

It is highly recommended that you get a tool like Firebug to see the post response coming back from the page. It helps immensely.

Here is an example of both in action doing the same thing: form submit with email validation.

jQuery.ajax

The form:



jQuery.ajax Form Submit
Name:


E-mail:

Pretty simple, nothing fancy. There is a form for each jQuery function, .ajax and .post. The only difference in the forms are the element names.

jQuery controls the submit for the forms. For the .ajax submission the jQuery is this:

$(function(){
    $("#JqAjaxForm").submit(function(){
        dataString = $("#JqAjaxForm").serialize();

        $.ajax({
        type: "POST",
        url: "process_form.cfm",
        data: dataString,
        dataType: "json",
        success: function(data) {

            if(data.email_check == "invalid"){
                $("#message_ajax").html("Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.");
            } else {
                $("#message_ajax").html("" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".");
            }

        }

        });

        return false;            

    });
});

The .serialize function is used to put the form data in a format that can be processed by a page on the server. The .ajax function options include:

type: “get” or “post”
url: the page to receive the form data
data: the form data itself
dataType: the data type the function should expect back from the server
success function: runs on a succesful post to the page

More information on the options and further explanations of the options used here can be found on the jQuery.ajax documentation page.

jQuery.post

As in the .ajax example, the form is simple, only the names have been changed:



jQuery.post Form Submit
Name:


E-mail:

And again, jQuery controls the submit for the forms. For the .post submission the jQuery is this:

$(function(){
    $("#JqPostForm").submit(function(){
        $.post("process_form.cfm", $("#JqPostForm").serialize(),
        function(data){
            if(data.email_check == 'invalid'){

                    $("#message_post").html("Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.");
            } else {
                $("#message_post").html("" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".");
                }
        }, "json");

        return false;

    });
});

jQuery.post is a shorter, easier way to post the form data. The function arguments are:

url of the form processing page
the form data
the callback function
the data type of the return data

More information can be found on the jQuery.post documentation page.

Processing the Form

Both methods are processed by the same page. It processes the form data, process_form.cfm in this example, by checking to see if the e-mail submitted is valid. Much more than that could be done on the page if needed.






   

    





	
	

	
	


	
	

	
	




#serializeJSON(return_struct)#

This code puts the results of the e-mail validation and the form data in a JSON-formatted string. It then will output the return data string which is picked up by the success function in the .ajax function or the function(data) function in the .post function on the original page.

I prefer working with JSON, but there are other options for the return data. Check the jQuery documentation for the types available to you.

The JSON response will look like this:

{"email_check":"valid","name":"Julia","email":"julia@example.com"}

NOTE: If you have ColdFusion 8 or better use the serializeJSON function. This function can return query results, arrays, dates, strings, and the like to JSON which is easily consumed and digested by javascript. Pre-CF 8 will require building the JSON string manually but with some loops and other creativity, it can be done.

The appropriate message based on the e-mail validation check is then displayed.

Pretty simple, pretty handy couple of jQuery functions. Once you see it in action, you get the idea.

Download zip of all files

Usual recommended jQuery and CF reading:

jQuery.ajax and jQuery.post Form Submit Examples with PHP

jen — Mon, 05 Oct 2009 00:11:55 +0000

For a version of this using ColdFusion, see the CF jquery form submit post.

Two jQuery functions that allow for the submission of form are the jQuery.ajax function and the jQuery.post function (there is also jQuery.get but that is not addressed here).

It is highly recommended that you get a tool like Firebug to see the post response coming back from the page. It helps immensely.

Here is an example of both in action doing the same thing: form submit with email validation.

jQuery.ajax

The form:



jQuery.ajax Form Submit
Name:


E-mail:

Pretty simple, nothing fancy. There is a form for each jQuery function, .ajax and .post. The only difference in the forms are the element names.

jQuery controls the submit for the forms. For the .ajax submission the jQuery is this:

$(function(){
    $("#JqAjaxForm").submit(function(){
        dataString = $("#JqAjaxForm").serialize();

        $.ajax({
        type: "POST",
        url: "process_form.php",
        data: dataString,
        dataType: "json",
        success: function(data) {

            if(data.email_check == "invalid"){
                $("#message_ajax").html("Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.");
            } else {
                $("#message_ajax").html("" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".");
            }

        }

        });

        return false;            

    });
});

The .serialize function is used to put the form data in a format that can be processed by a page on the server. The .ajax function options include:

type: “get” or “post”
url: the page to receive the form data
data: the form data itself
dataType: the data type the function should expect back from the server
success function: runs on a succesful post to the page

More information on the options and further explanations of the options used here can be found on the jQuery.ajax documentation page.

jQuery.post

As in the .ajax example, the form is simple, only the names have been changed:



jQuery.post Form Submit
Name:


E-mail:

And again, jQuery controls the submit for the forms. For the .post submission the jQuery is this:

$(function(){
    $("#JqPostForm").submit(function(){
        $.post("process_form.php", $("#JqPostForm").serialize(),
        function(data){
            if(data.email_check == 'invalid'){

                    $("#message_post").html("Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.");
            } else {
                $("#message_post").html("" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".");
                }
        }, "json");

        return false;

    });
});

jQuery.post is a shorter, easier way to post the form data. The function arguments are:

url of the form processing page
the form data
the callback function
the data type of the return data

More information can be found on the jQuery.post documentation page.

Processing the Form

Both methods are processed by the same page. It processes the form data, process_form.php in this example, by checking to see if the e-mail submitted is valid. Much more than that could be done on the page if needed.

$email_check = '';
$return_json = '';

function isValidEmail($email){
    return eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email);
}

if(isValidEmail($_POST['email_ajax']) || isValidEmail($_POST['email_post'])) {
   $email_check = 'valid';
}
else {
    $email_check = 'invalid';
}

$return_json = '{"email_check":"' . $email_check . '",';

if (isset($_POST['email_ajax'])){
    $return_json = $return_json . '"name":"' . $_POST['name_ajax'] . '",';
    $return_json = $return_json . '"email":"' . $_POST['email_ajax'] . '"}';
} else {
    $return_json = $return_json . '"name":"' . $_POST['name_post'] . '",';
    $return_json = $return_json . '"email":"' . $_POST['email_post'] . '"}';
}

echo $return_json;

This code puts the results of the e-mail validation and the form data in a JSON-formatted string. It then will echo the return data string which is picked up by the success function in the .ajax function or the function(data) function in the .post function on the original page.

I prefer working with JSON, but there are other options for the return data. Check the jQuery documentation for the types available to you.

The JSON response will look like this:

{"email_check":"valid","name":"Julia","email":"julia@example.com"}

NOTE: If you have PHP 5.2 or better and the filter_var and json_encode functions available, use the following code instead:

$email_check = '';
$return_arr = array();

if(filter_var($_POST['email_ajax'], FILTER_VALIDATE_EMAIL) || filter_var($_POST['email_post'], FILTER_VALIDATE_EMAIL)) {
   $email_check = 'valid';
}
else {
    $email_check = 'invalid';
}

$return_arr["email_check"] = $email_check;

if (isset($_POST['email_ajax'])){
    $return_arr["name"] = $_POST['name_ajax'];
    $return_arr["email"] = $_POST['email_ajax'];
} else {
    $return_arr["name"] = $_POST['name_post'];
    $return_arr["email"] = $_POST['email_post'];

}

echo json_encode($return_arr);

The appropriate message based on the e-mail validation check is then displayed.

Pretty simple, pretty handy couple of jQuery functions. Once you see it in action, you get the idea.

Demo

Download zip of all files

Usual recommended jQuery and PHP reading:

Override “Print Background Colors and Images” Option in Browser

jen — Fri, 18 Sep 2009 17:39:36 +0000

Internet Explorer and Firefox, to name a few, have an option that allows for the printing of background colors and images. The user can check this option to override the print style sheet and print the backgrounds that were removed to increase legibility, protect copyright, or whatever other reason was necessary.

By default, this option is off in browsers and the user has to manually check a box. In IE it is under Tools, Internet Options, Advanced, Printing. In Firefox it is in Page Setup of the Print Preview window.

Here is what is looks like in FF:

To prevent the browser from printing backgrounds when this is checked, add the following to your print style sheet:

* {
  background-color: white !important;
  background-image: none !important;
  }

Now, I’m not one to take all control away from the user, but there are situations when you must.

ColdFusion Example: Session Timeout Warning with jQuery/JS

jen — Sat, 12 Sep 2009 18:57:58 +0000

I wrote a post on session timeout warnings with PHP; here’s a version with ColdFusion. Some of the text is the same because the method and principles are the same for both languages.

Javascript is needed to keep track of the time the user has been sitting on the page. The server does not know how long they have been sitting there. It only knows whether or not a request comes in during a session or after the session has expired and acts accordingly at that time. Too late for a warning.

Session Defined: Start to Finish

A session is defined as when a user begins and ends using or visiting a web site. It can be unlimited in length or strictly defined by a timeout period. If the site requires a log in or accesses sensitive data, it should time out after a period of inactivity. They can end a session by logging out or closing the browser.

Inactivity means the user has done nothing, made no requests of the web server, during a specified time. Ajax requests usually do not count.

Demo

The session time left is determined by the server, and, if you want to poll the server with an Ajax request, go for it. Javascript is used to keep track of the time left in the session.

The demo uses a simple log in with session timing handled by jquery and javascript. When the session expiration approaches, the user is warned and given an opportunity to restart the session. If the session time limit is reached, the user is prompted to log in again. If they ignore that prompt, the page automatically redirects to the log in form. In the demo this sequence of events takes 40 seconds to complete and is broken down as follows:

Session timeout: 30 seconds
Timeout warning: 20 seconds
Session expired warning: 10 seconds
Redirect to log in page: 10 seconds

Interrupting the User

The user’s attention can be diverted away from other open windows to the eminent session expiration by using a javascript alert in place of the jquery dialog box. Personal preference.

Code Breakdown

The application.cfc controls the session by creating non-persistent cookies for CFID and CFTOKEN so the session expires when the user’s browser closes. It also sets the session variables requestStartTime, timeoutLength, and sessionStartTime. The sessionStartTime variable is used to illustrate the fact that the application.cfc function OnSessionStart only fires once. It does not fire every time a session is renewed or restarted.

The log in page checks for a query string variable called ‘expired’ and, if present, deletes the session loggedin variable. This is there because the code is going to control the expiration of the session eliminating the need to compensate for browser latency. The actual session start time the time the page loads can differ by several seconds. To avoid having to add time to the session or any other fancy guesswork, when the allotted session time has expired according to the javascript timer on the page, they are done – session over.

If they are logged in, they get bumped to the index page. The rest is the logic that handles the log in form.

Note: I would not recommend handling a log in form this way. This is for demonstration only.

Other than the log in form and a message for the user, that’s all there is to the log in page.

Handling Session Timeout

The index page handles the session timeout code. This could be a separate javascript included in every page. The first block simply determines if they are logged in. If they are not, send them to the login page. If they are, load the index page.

Now the time variables are set and the a javascript timer is set to check the session every 10 seconds.
Javascript uses milliseconds so for clarity the time intervals multiply the number of seconds by 1,000. You could put 10000 in for 10 seconds but I think 10*1000 helps me determine that it is 10 seconds quite a bit faster. Do what is comfortable for you.

//event to check session time variable declaration
var checkSessionTimeEvent = 0;

$(document).ready(function() {
	//event to check session time left (times 1000 to convert seconds to milliseconds)
    checkSessionTimeEvent = setInterval("checkSessionTime()",10*1000);
});


//time session started
#toScript(session.requeststarttime,"requestTime")#

//session timeout length
var timeoutLength = #session.timeoutLength#*1000;


//force redirect to log in page length (session timeout plus 10 seconds)
var forceRedirectLength = timeoutLength + (10*1000);

//set time for first warning, ten seconds before session expires
var warningTime = timeoutLength - (10*1000);

//set number of seconds to count down from for countdown ticker
var countdownTime = 10;

The ColdFusion toScript() function is used to create a javascript variable from a CF variable. Very handy.
The checkSessionTime function is what gets fired off every 10 seconds by the timer. It does a time comparison and opens the dialog boxes that warn the user.

function checkSessionTime()
{
	//get time now
	var timeNow = new Date(); 

	//event create countdown ticker variable declaration
	var countdownTickerEvent; 	

	//difference between time now and time session started variable declartion
	var timeDifference = 0;

	timeDifference = timeNow - requestTime;

    if (timeDifference > warningTime && timeDifference < timeoutLength)
        {
            //call now for initial dialog box text (time left until session timeout)
            countdownTicker(); 

            //set as interval event to countdown seconds to session timeout
            countdownTickerEvent = setInterval("countdownTicker()", 1000);

            $('#dialogWarning').dialog('open');
        }
    else if (timeDifference > timeoutLength)
    	{
    		//close warning dialog box
            if ($('#dialogWarning').dialog('isOpen')) $('#dialogWarning').dialog('close');

            $('#dialogExpired').dialog('open');

            //clear (stop) countdown ticker
            clearInterval(countdownTickerEvent);
        }

     if (timeDifference > forceRedirectLength)
     	{
        	//clear (stop) checksession event
            clearInterval(checkSessionTimeEvent);

            //force relocation
            window.location="login.cfm?expired=true";
        }
}

The countdownTicker function provides a countdown inside the warning dialog box to prompt the user to act now. It uses a timer that fires every second for a 5,4,3,2,1 effect inside the dialog box.

function countdownTicker()
{
	//put countdown time left in dialog box
	$("span#dialogText-warning").html(countdownTime);

	//decrement countdownTime
	countdownTime--;
}

And, the dialog boxes either allow the user to reload the page or, if they did nothing when the warning popped up, it logs them out by redirecting to the log in page with the expired variable in the query string. Also, thanks to scube’s debugging, it now redirects to the log in if they hit the close button on the dialog box rather than the Login button.

$(function(){
                // jQuery UI Dialog
                $('#dialogWarning').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
		    close: function() {
                            window.location="login.php?expired=true";
                     },
                    buttons: {
                        "Restart Session": function() {
                            location.reload();
                        }
                    }
                });

                $('#dialogExpired').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Login": function() {
                            window.location="login.cfm?expired=true";
                        }
                    }
                });
});

The dialog box contents are at the bottom of the page but they could be just about anywhere in the body.


 Your session has expired!


 Your session will expire in  seconds!

Remember, this is just one example. There are other ways to do this. Use this, improve this, or roll your own.

Download zip of all files

Session Timeout Warning PHP Example with jQuery/JS

jen — Tue, 08 Sep 2009 00:45:37 +0000

Detecting and warning a user of their session timing out can come in handy and, in some cases, may be necessary. Here is one way of doing this with jQuery/javascript and PHP. There may be a better way to do this, so take this as an example.
There is a post on a ColdFusion session timeout warning that works in a similar manner.

Session Defined: Start to Finish

Inactivity means the user has done nothing, made no requests of the web server, during a specified time. Ajax requests usually do not count. There are other posts out there that detail how to check for session expiration with Ajax requests.

Demo

The session time left is determined by the server, and, if you want to poll the server with an Ajax request, go for it. This demo uses javascript to keep track of the time left in the session.

Session timeout: 30 seconds
Timeout warning: 20 seconds
Session expired warning: 10 seconds
Redirect to log in page: 10 seconds

Interrupting the User

The user’s attention can be diverted away from other open windows to the eminent session expiration by using a javascript alert in place of the jquery dialog box. Personal preference.

Code Breakdown

The log in page checks for a query string variable called ‘expired’ and sets the loggedin cookie to false. This is there because the code is going to control the expiration of the session eliminating the need to compensate for browser latency. The actual session start time the time the page loads can differ by several seconds. To avoid having to add time to the session or any other fancy guesswork, when the allotted session time has expired according to the javascript timer on the page, they are done – session over.

If they are logged in, they get bumped to the index page. The rest is the logic that handles the log in form.

Note: I would not recommend handling a log in form this way. This is for demonstration only.

//if query string contains expired var & it = true, set loggedin cookie as false
//else if loggedin cookie exists and is set to true, send to index page
if (isset($_GET['expired']) && $_GET['expired'] == 'true')
    {
        setcookie("loggedin", "false", time()+30);
    }
elseif (isset($_COOKIE['loggedin']) && $_COOKIE['loggedin'] == 'true')
    {
        header("Location: index.php");
        exit;
    }
//log in logic
if (isset($_POST['username']) && isset($_POST['pw']) && $_POST['username'] == "session" && $_POST['pw'] == "test")
    {
        setcookie("loggedin", "true", time()+30);
        header("Location: index.php");
        exit;
    }

Other than the log in form and a message for the user, that’s all there is to the log in page.

Handling Session Timeout

if (!isset($_COOKIE['loggedin']) || (isset($_COOKIE['loggedin']) && $_COOKIE['loggedin'] == 'false'))
    {
        header("Location: login.php");
        exit;
    }
elseif (isset($_COOKIE['loggedin']) && $_COOKIE['loggedin'] == 'true')
    {
    //user is logged in, page was refreshed or reloaded to restart session so reset cookie
    setcookie("loggedin", "true", time()+30);
    }
?>

//event to check session time variable declaration
var checkSessionTimeEvent;

$(document).ready(function() {
	//event to check session time left (times 1000 to convert seconds to milliseconds)
    checkSessionTimeEvent = setInterval("checkSessionTime()",10*1000);
});

//time session started
var pageRequestTime = new Date();

//session timeout length
var timeoutLength = 30*1000;

//force redirect to log in page length (session timeout plus 10 seconds)
var forceRedirectLength = timeoutLength + (10*1000);

//set time for first warning, ten seconds before session expires
var warningTime = timeoutLength - (10*1000);

//set number of seconds to count down from for countdown ticker
var countdownTime = 10;

The checkSessionTime function is what gets fired off every 10 seconds by the timer. It does a time comparison and opens the dialog boxes that warn the user.

function checkSessionTime()
{
	//get time now
	var timeNow = new Date(); 

	//event create countdown ticker variable declaration
	var countdownTickerEvent; 	

	//difference between time now and time session started variable declartion
	var timeDifference = 0;

	timeDifference = timeNow - pageRequestTime;

    if (timeDifference > warningTime && timeDifference < timeoutLength)
        {
            //call now for initial dialog box text (time left until session timeout)
            countdownTicker(); 

            //set as interval event to countdown seconds to session timeout
            countdownTickerEvent = setInterval("countdownTicker()", 1000);

            $('#dialogWarning').dialog('open');
        }
    else if (timeDifference > timeoutLength){
    		//close warning dialog box
            if ($('#dialogWarning').dialog('isOpen')) $('#dialogWarning').dialog('close');

            $('#dialogExpired').dialog('open');

             //clear (stop) countdown ticker
            clearInterval(countdownTickerEvent);
        }

    if (timeDifference > forceRedirectLength)
     	{
           //clear (stop) checksession event
            clearInterval(checkSessionTimeEvent);

            //force relocation
            window.location="login.php?expired=true";
        }
}

The countdownTicker function provides a countdown inside the warning dialog box to prompt the user to act now. It uses a timer that fires every second for a 5,4,3,2,1 effect inside the dialog box.

function countdownTicker()
{
	//put countdown time left in dialog box
	$("span#dialogText-warning").html(countdownTime);

	//decrement countdownTime
	countdownTime--;
}

$(function(){
                // jQuery UI Dialog
                $('#dialogWarning').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Restart Session": function() {
                            location.reload();
                        }
                    }
                });

                $('#dialogExpired').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    close: function() {
                            window.location="login.php?expired=true";
                        },
                    buttons: {
                        "Login": function() {
                            window.location="login.php?expired=true";
                        }
                    }
                });
});

The dialog box contents are at the bottom of the page but they could be just about anywhere in the body.


 Your session has expired!


 Your session will expire in  seconds!

Remember, this is just one example. There are other ways to do this. Use this, improve this, or roll your own.

Demo

Download zip of all files

[Discussion] Donating to Developers: It’s the Right Thing to Do

jen — Thu, 03 Sep 2009 12:57:41 +0000

I just went through the WordPress plugins I use and donated to every developer that had a donation link.

I know, and you know, how much work and time goes into creating plugins and tutorials for fellow developers and newbies. The least any of us can do is throw a dime or two at these folks.

And, for heaven’s sake, if your getting paid for using someone else’s work, send them something. Anything. $5, $10, whatever.

Let me know what you think.