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.
JavaScript Cheat Sheet
1 August 2005 | 102 comments | code, webdev, cheatsheet, development, reference, programming, ajax, web, webdesign, javascript, guide
A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
"Select All" JavaScript for Forms Posting to an Array
28 July 2005 | 55 comments | select, html, php, array, forms, javascript, checkboxes, form, all
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>
VBScript Date Format Functions
15 March 2004 | 69 comments | scripts, development, reference, programming, vbscript, javascript, time, unix, date, asp, vb, webdesign
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.
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.
