Lock/Freeze Web Page using jQuery

Sam Deering
Sam Deering
Share

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. 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

What is the purpose of freezing a web page using jQuery?

Freezing a web page using jQuery is a technique used by developers to halt any dynamic activity on a webpage. This is particularly useful when inspecting dynamic elements on a page or debugging a script. By freezing the page, developers can examine the state of the page at a specific point in time, making it easier to identify and fix issues.

How does jQuery freeze a web page?

jQuery freezes a web page by disabling all interactive elements on the page. This includes links, buttons, form inputs, and any other elements that can trigger events. The jQuery .off() method is commonly used to remove event handlers from these elements, effectively freezing the page.

Can I freeze specific elements on a web page using jQuery?

Yes, you can freeze specific elements on a web page using jQuery. Instead of applying the .off() method to the entire document, you can target specific elements by their ID, class, or other attributes. This allows you to freeze certain parts of the page while leaving others interactive.

Is it possible to unfreeze a web page after it has been frozen?

Yes, it is possible to unfreeze a web page after it has been frozen. This can be done by reattaching the event handlers that were removed when the page was frozen. The jQuery .on() method can be used to accomplish this.

Can freezing a web page affect its performance?

Freezing a web page should not significantly affect its performance. However, if a page has a large number of interactive elements, removing and reattaching event handlers can potentially cause a slight delay. It’s important to note that this technique is typically used for debugging purposes and is not recommended for general use.

Can I freeze a web page using plain JavaScript?

Yes, it is possible to freeze a web page using plain JavaScript. However, jQuery simplifies the process by providing convenient methods for manipulating the DOM and handling events. If you prefer to use plain JavaScript, you can achieve similar results using the addEventListener() and removeEventListener() methods.

How can I freeze a web page for a specific period of time?

To freeze a web page for a specific period of time, you can use the setTimeout() function in conjunction with the jQuery .off() method. The setTimeout() function allows you to specify a delay before executing a piece of code, effectively creating a timer.

Can I freeze a web page on mobile devices?

Yes, you can freeze a web page on mobile devices using jQuery. The process is the same as on a desktop browser. However, keep in mind that mobile browsers may behave slightly differently than their desktop counterparts, so it’s always a good idea to test your code on multiple platforms.

Can I freeze a web page without using jQuery or JavaScript?

While it is technically possible to freeze a web page using CSS, this method is not recommended. CSS can be used to disable pointer events, effectively making elements non-interactive. However, this does not truly freeze the page as JavaScript can still modify the DOM and trigger events.

Is it possible to freeze a web page while it’s loading?

Freezing a web page while it’s loading can be tricky, as the DOM may not be fully constructed when your script runs. However, you can use the jQuery .ready() method to ensure your code runs once the DOM is fully loaded. This allows you to freeze the page as soon as it finishes loading.