Tagged with "javascript"
Cheat Sheets
JavaScript
78 comments
A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
Articles
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.
Blog Posts
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
This may be useful to someone - a question on the BNM list led to this small piece of JavaScript.
The original problem was that when posting to a PHP script, in order to have the result as an array (when using a set of checkboxes for example), the quickest way to do this is to add "[]" to the item name (eg 'name="area[]"). Then, PHP can access $_POST['area'] as an array in the receiving script.
Unfortunately, the addition of square brackets causes trouble with JavaScript, especially with a "Select All" function. This script works around that using regular expressions, and might prove useful to someone experiencing the same problem later.
<!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>
