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://www.sitepoint.com/wp-content/uploads/jquery4u/2011/01/demo.html
Download URL: http://www.sitepoint.com/wp-content/uploads/jquery4u/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

 
 
Please take the time to check out their website. This window unfrezes in a few seconds.


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;
}
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Jquery-starter

    Live demos doesn’t work for me

  • Janak

    Nice tutorial but how to make some or button keep clickable ( for popup function)??

  • Paul Valkama

    Great code! For those non-techies there are services that will do for you. One that I can vouch for (as I work for them) is PageFreezer – It’s pretty simple.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.