Lock/Freeze Web Page using jQuery

This tutorial show you how to set a jQuery timer for your web page to lock the interface for a specified length of time.

webpage-timer-buttons

webpage-timer-show

In this example when a user clicks to open a website, it opens in another window/tab and the original webpage is frozen for a specified length of time. This is because i want the user to view the website in the new window/tab and having the source webpage locked means they are forced to wait and may be more inclined to have a look at the opened window.

View Live Demo
Download Source Files
Demo URL: http://jquery4u.com/wp-content/uploads/2011/01/demo.html
Download URL: http://www.jquery4u.com/wp-content/uploads/2011/01/demo.zip

Why lock the webpage?

You can prevent the user from clicking any webpage buttons

  • until the webpage has finished loading
  • until an AJAX script has finished loading
  • until a popup window has finished loading

How to Freeze the Web Page?

  1. include the jquery files: jquery.min.js, jquery.uilock.js
  2. include the jQuery Code below
  3. edit the jQuery to get the locked effect you want
  4. edit the html to include the code (explained in detail below)
  5. customise the css styles to get the look you want

jQuery Code

//function to open url a new window/tab
function load_url(url) {
    var load = window.open(url);
}
//function to show the countdown in seconds until the web page is unfrozen (active) again
function do_countdown(duration) {
    //10 seconds fix
    start_num = duration;
    var countdown_output = document.getElementById('countdown_div');
    if (start_num > 0) {
        countdown_output.innerHTML = format_as_time(start_num);
        var t=setTimeout("update_clock(\"countdown_div\", "+start_num+")", 1000);
    }
    return false;
}
//helper function to update the timer on the web page this is frozen
function update_clock(countdown_div, new_value) {
    var countdown_output = document.getElementById(countdown_div);
    var new_value = new_value - 1;

    if (new_value > 0) {
        new_formatted_value = format_as_time(new_value);
        countdown_output.innerHTML = new_formatted_value;

        var t=setTimeout("update_clock(\"countdown_div\", "+new_value+")", 1000);
    } else {
        //finish!
        countdown_output.innerHTML = "";
        $('#countdown_box').hide();

        //unlock UI
        $.uiUnlock();

        //perform anything here after the web page is unfrozen
    }
}
//helper function to calculate the time (seconds) remaining as minutes and seconds
function format_as_time(seconds) {
    var minutes = parseInt(seconds/60);
    var seconds = seconds - (minutes*60);

    if (minutes < 10) {
        minutes = "0"+minutes;
    }

    if (seconds < 10) {
        seconds = "0"+seconds;
    }

    var return_var = minutes+':'+seconds;
    return return_var;
}
//main function to load the new website and start the countdown
function view_blog_countdown(blog_url, duration) {
    load_url(blog_url);
    $('#countdown_box').show(); //countdown
    $('#countdown_title').html(blog_url);
    $.uiLock('');
    do_countdown(duration); //performs countdown then unlocks
}

jQuery UI Lock Code

In this code you can customise the way the frozen web page looks.

(function($) {
    $.extend({
uiLock: function(content){
            if(content == 'undefined') content = '';
            $('<div></div>').attr('id', 'uiLockId').css({
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'z-index': 1000,
                'opacity': 0.6,
                'width':'100%',
                'height':'100%',
                'color':'white',
                'background-color':'black'
            }).html(content).appendTo('body');
        },
uiUnlock: function(){
            $('#uiLockId').remove();
        }
    });
})(jQuery);
//funciton to initialise a click event for the webpage buttons
$(document).ready(function() {
    $('#lock').click(function(){
        //show content
        $('#countdown_box').show(); //countdown

        //lock interface
        $.uiLock('');

        //start the countdown (unlocks interface at end)
        do_countdown();
    });

    //Initial settings
    $('#countdown_box').hide();
});

HTML Code

<div id="countdown_box">
    <div id="countdown_title">&amp;nbsp;</div>
    <div id="countdown_div">&amp;nbsp;</div>
    <div id="countdown_msg">Please take the time to check out their website. This window unfrezes in a few seconds.</div>
</div>

<input type="button" onclick="javascript:view_blog_countdown('http://jquery4u.com','3')" value="View Blog - http://jquery4u.com (3 second timer)" /><br />
<input type="button" onclick="javascript:view_blog_countdown('http://blogoola.com','10')" value="View Blog - http://blogoola.com (10 second timer)" /><br />

CSS Code

#countdown_box {
position:absolute;
top:32%;
left:32%;
width:300px;
border:3px solid blue;
padding:70px;

overflow: hidden;
text-overflow: ellipsis;
}
#countdown_title {
font-family: tahoma;
font-weight: bold;
colour: blue;
font-size: 18px;
}
#countdown_div {
font-family: tahoma;
font-weight: bold;
font-size: 56px;
}