Cheat Sheets
JavaScript
93 comments
A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
Articles
No articles found matching this tag.
Blog and Lab
Good-Looking Tooltips
I have implemented Good-Looking Tooltips, using the excellent technique by Robert Nyman.
There were a couple of small issues along the way - a bit of code I added to the site's JavaScript when I was experimenting with XHTML was causing some trouble, and < and > were being treated as HTML rather than as characters. Robert kindly helped me work out the kinks though, and now it's all up and running. For an example, hover over this text.
"Select All" JavaScript for Forms Posting to an Array
The problem that led to this snippet of code was that when posting from a form to a PHP script, you may sometimes want to have several fields with the same name and different values. For example, you might want people to be able to tick boxes to indicate which cities they have been to from a list. You would normally add "[]" to the name of the field inputs, like so:
<input type="checkbox" name="cities[]" value="London"> London
<input type="checkbox" name="cities[]" value="Paris"> Paris
<input type="checkbox" name="cities[]" value="Berlin"> Berlin
<input type="checkbox" name="cities[]" value="Madrid"> Madrid
<input type="checkbox" name="cities[]" value="Rome"> Rome
When the form is received by PHP, whichever items are ticked in the cities list above are accessible in the array $_POST['cities']. This is very handy.
Unfortunately, the addition of square brackets causes trouble with JavaScript, especially with a "Select All" function - which allows you to check all boxes at once by clicking a single one. This script works around that using regular expressions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Checkbox Fun</title>
<script type="text/javascript"><!--
var formblock;
var forminputs;
function prepare() {
formblock= document.getElementById('form_id');
forminputs = formblock.getElementsByTagName('input');
}
function select_all(name, value) {
for (i = 0; i < forminputs.length; i++) {
// regex here to check name attribute
var regex = new RegExp(name, "i");
if (regex.test(forminputs[i].getAttribute('name'))) {
if (value == '1') {
forminputs[i].checked = true;
} else {
forminputs[i].checked = false;
}
}
}
}
if (window.addEventListener) {
window.addEventListener("load", prepare, false);
} else if (window.attachEvent) {
window.attachEvent("onload", prepare)
} else if (document.getElementById) {
window.onload = prepare;
}
//--></script>
</head>
<body>
<form id="form_id" name="myform" method="get" action="search.php">
<a href="#" onClick="select_all('area', '1');">Check All Fruit</a> | <a href="#" onClick="select_all('area', '0');">Uncheck All
Fruit</a><br><br>
<input type="checkbox" name="area[]" value="1" />Apples<br />
<input type="checkbox" name="area[]" value="2" />Bananas<br />
<input type="checkbox" name="area[]" value="3" />Chickens<br />
<input type="checkbox" name="area[]" value="4" />Stoats
<br><br><a href="#" onClick="select_all('location', '1');">Check All Locations</a> | <a href="#" onClick="select_all('location',
'0');">Uncheck All Locations</a><br><br>
<input type="checkbox" name="location[]" value="1" />Brighton<br />
<input type="checkbox" name="location[]" value="2" />Hove<br />
</form>
</body>
</html>
28 July 2005 | 54 comments | select, html, php, array, forms, javascript, checkboxes, form, all
VBScript Date Format Functions
Date formatting in VBScript is not quite as powerful as PHP. This function gives you plenty more ways to format dates and times in VBScript with the minimum of effort.
Click here to read this post »
15 March 2004 | 68 comments | scripts, development, reference, programming, vbscript, javascript, time, unix, date, asp, vb, webdesign
Minimum Font Size
Using relative font sizes is a must for an accessible website, but you run the risk of having incredibly small text. This JavaScript workaround will ensure that the majority of your visitors do not need a microscope to read your content.
