Friday, August 13, 2004

Popup Window Countdown (JavaScript)

This code opens a new popup window that contains a timer that counts down, then closes the window when it reaches 0. Will not work if user has a popup blocker blocking the page.

<html>
<head>
<title>Popup Timer</title>
<script language="JavaScript" type="text/JavaScript">

// popup window var
var popup;

// At what number shall the countdown counter start?
CounterStart = 10;
 
// This function CustomAction() can be modified to do 
// whatever you want done every second.
 
function CustomAction() {
	popup.document.timer.timeleft.value = CounterStart;
} // end of function CustomAction()

// end of JavaScript customization


function Decrement() {
	CounterStart--;
	CustomAction();
	if(CounterStart <= 0) { popup.close(); alert('Timer reached 0'); }
	else { setTimeout('Decrement()',1000); }
}
 
function StartTheCounter() {
	openPopup(120,100);
	setTimeout('Decrement()',1000);
}

function openPopup(w,h){
	// new window title
	var contents = '<html><head><title>Counter Window<\/title>';
	// resize window once image has loaded
	contents += '<script type="text\/javascript">window.onload = init;';
	// centre the popup window
	contents += 'function init() {window.moveTo((screen.width-'+w+')/2,(screen.height-'+h+')/2)}';
	contents += '<\/script>';
	contents += '<\/head><body>';
	contents += '<form name="timer">'
	contents += '<input name="timeleft" type="text" size="4" readonly="" value="'+CounterStart+'" /> seconds!';
	contents += '</form>';
	contents += '<\/body><\/html>';
	// open popup window
	popup = window.open('about:blank','popup','location=no,menubar=no,scrollbars=no,status=no,toolbar=no,width='+w+',height='+h);
	popup.document.open();
	popup.document.write(contents);
	popup.document.close();
}
// -->
</script>
</head>
<body onload="StartTheCounter();">
Popup Window Timer
</body>
</html>

No comments: