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>

Comments

Post a Comment

Popular posts from this blog

Text Clips for Programmers Notepad 2 (XHTML)

Update (23 June, 2005) : Added DOCTYPEs. More Programmers Notepad 2 text clips. Some tags are not included (b, big, i, small, sub, sup) as these can be replaced with existing tags (em, strong), or styled using CSS. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. xhtmltags.clips) and paste in the following code: <?xml version="1.0"?> <clips name="XHTML Tags"> <clip name="------ DOCTYPEs ------"></clip> <clip name="XHTML 1.0 transitional"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|]]></clip> <clip name="XHTML 1.0 strict"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">|]]></clip> <clip name="XHTML 1.1...
Read more

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Read more