Lock/Freeze Web Page using jQuery

Key Takeaways

• Locking or freezing a webpage using jQuery can be useful for developers when inspecting dynamic elements on a page or debugging a script. It halts any dynamic activity on a webpage, allowing developers to examine the state of the page at a specific point in time.
• The process of freezing a webpage involves disabling all interactive elements on the page including links, buttons, form inputs, and any other elements that can trigger events. This is achieved through using the jQuery .off() method to remove event handlers from these elements.
• It’s possible to unfreeze a webpage by reattaching the event handlers that were removed when the page was frozen, typically using the jQuery .on() method. Freezing a webpage should not significantly affect its performance, but it’s not recommended for general use as it’s primarily a technique for debugging purposes.

This tutorial show you how to set a jQuery timer for your web page to lock the interface for a specified length of time. 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. Download Source Files Download URL: https://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;
}

Frequently Asked Questions (FAQs) about Freezing Web Pages with jQuery