<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testing Javascript</title>
<script type="text/javascript">
var seen = {};
function updateContent(input) {
document.getElementById('result').innerHTML = "<p>" + input.value + "</p>";
}
function displayMessage(message) {
document.getElementById('result').innerHTML = "<p>" + message + "</p>";
}
function appendMessage(message) {
document.getElementById('result').innerHTML += message + " ";
}
function register(message) {
if (!seen[message]) {
appendMessage(message);
seen[message] = true;
}
}
function delayedShowHide(delay, show) {
var blackBox = document.getElementById('clickToHide');
window.setTimeout(function() {
blackBox.style.display = show ? '' : 'none';
}, delay);
}
</script>
<script type="text/javascript">
var startList = function() {
// Ugh. Let's hope no-one is faking their user agent when running the tests
if (navigator.userAgent.indexOf("MSIE") != -1) {
var navRoot = document.getElementById("nav");
for (var i = 0; i < navRoot.childNodes.length; i++) {
var node = navRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = function() {
this.className += " over";
};
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
};
}
}
}
};
window.onload=startList;
</script>
<style type="text/css">
#nav {
padding: 0; margin: 0; list-style: none;
}
#nav li {
float: left; position: relative; width: 10em;
}
#nav li ul {
display: none; position: absolute; top: 1em; left: 0;
}
#nav li > ul { top: auto; left: auto; }
#nav li:hover ul, #nav li.over ul{ display: block; background: white; }
</style>
</head>
<body>
<h1>Type Stuff</h1>
<div>
<ul id="nav">
<li id="menu1">Menu 1
<ul>
<li id="item1" onclick="displayMessage('item 1');">Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
</div>
<div id="result">
</div>
<div id="formageddon">
<form action="#">
Key Up: <input type="text" id="keyUp" onkeyup="javascript:updateContent(this)"/><br/>
Key Down: <input type="text" id="keyDown" onkeydown="javascript:updateContent(this)"/><br/>
Key Press: <input type="text" id="keyPress" onkeypress="javascript:updateContent(this)"/><br/>
Change: <input type="text" id="change" onkeypress="javascript:displayMessage('change')"/><br/>
<textarea id="keyDownArea" onkeydown="javascript:updateContent(this)" rows="2" cols="15"></textarea>
<textarea id="keyPressArea" onkeypress="javascript:updateContent(this)" rows="2" cols="15"></textarea>
<textarea id="keyUpArea" onkeyup="javascript:updateContent(this)" rows="2" cols="15"></textarea>
<select id="selector" onchange="javascript:updateContent(this)">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
<input type="checkbox" id="checkbox" value="checkbox thing" onchange="javascript:updateContent(this)"/>
<input id="clickField" type="text" onclick="document.getElementById('clickField').value='Clicked';" value="Hello"/>
<input id="clearMe" value="Something" onchange="displayMessage('Cleared')"/>
</form>
</div>
<div>
<p><a href="#" onclick="javascript:document.title='Changed'">Change the page title!</a></p>
<p><a onclick="javascript:document.title='Changed'" id="nohref">No href</a></p>
<p><a id="updatediv" href="#" onclick="javascript:document.getElementById('dynamo').innerHTML = 'Fish and chips!';">Update a
div</a></p>
</div>
<div id="dynamo">What's for dinner?</div>
<div id="mousedown" onmousedown="javascript:displayMessage('mouse down');">
<p>Click for the mouse down event</p>
<span><p id="child">Here's some text</p></span>
</div>
<div id="mouseup" onmouseup="javascript:displayMessage('mouse up');">
<p>Click for the mouse up event</p>
</div>
<div id="mouseclick" onclick="javascript:displayMessage('mouse click');">
<p>Click for the mouse click event</p>
</div>
<div id="error" onclick="document.getElementById('doesnotexist').innerHTML = 'cheese';">
Clicking this causes a JS exception in the click handler
</div>
<div>
<form action="resultPage.html" id="on-form">
<input id="theworks"
onfocus="appendMessage('focus')"
onkeydown="appendMessage('keydown')"
onkeypress="appendMessage('keypress')"
onkeyup="appendMessage('keyup')"
onblur="appendMessage('blur')"
onchange="appendMessage('change')"
/>
<input id="changeable" name="changeable" onfocus="appendMessage('focus')" onchange="appendMessage('change')" onblur="appendMessage('blur')"/>
<button type="button" id="plainButton"
onfocus="appendMessage('focus')"
onkeydown="appendMessage('keydown')"
onkeypress="appendMessage('keypress')"
onkeyup="appendMessage('keyup')"
onblur="appendMessage('blur')"
onclick="appendMessage('click')"
onmousedown="appendMessage('mousedown ')"
onmouseup="appendMessage('mouseup ')"
onmouseover="register('mouseover ')"
onmousemove="register('mousemove ')"
>
<b>Go somewhere</b>
</button>
<button type="submit" id="submittingButton"><emph>submit</emph></button>
<button type="button" id="jsSubmitButton" onclick="javascript:document.getElementById('on-form').submit();">Submitomatic</button>
<button type="button" id="switchFocus" onclick="document.getElementById('theworks').focus();">Switch focus</button>
<button type="button" onclick="var element = document.getElementById('switchFocus'); var clickEvent = document.createEvent('MouseEvents'); clickEvent.initMouseEvent('click', true, true, null, 0, 0, 0, 0, 0,false, false, false, false, 0, element);element.dispatchEvent(clickEvent);">Do magic</button>
</form>
<form action="javascriptPage.html" id="submitListeningForm" onsubmit="appendMessage('form-onsubmit '); return false;">
<p>
<input id="submitListeningForm-text" type="text" onsubmit="appendMessage('text-onsubmit ')" onclick="appendMessage('text-onclick ');" />
<input id="submitListeningForm-submit" type="submit" onsubmit="appendMessage('submit-onsubmit ')" onclick="appendMessage('submit-onclick ');" />
</p>
</form>
</div>
<p id="suppressedParagraph" style="display: none">A paragraph suppressed using CSS display=none</p>
<div>
<p id="displayed">Displayed</p>
<form action="#"><input type="hidden" name="hidden" /> </form>
<p id="none" style="display: none;">Display set to none</p>
<p id="hidden" style="visibility: hidden;">Hidden</p>
<div id="hiddenparent" style="height: 2em; display: none;">
<div id="hiddenchild">
<a href="#" id="hiddenlink">ok</a>
</div>
</div>
<div style="visibility: hidden;">
<span>
<input id="unclickable" />
<input type="checkbox" id="untogglable" checked="checked" />Check box you can't see
</span>
</div>
<p id="outer" style="visibility: hidden">A <b id="visibleSubElement" style="visibility: visible">sub-element that is explicitly visible</b> using CSS visibility=visible</p>
</div>
<div>
<form>
<input type="text" id="keyReporter" size="80"
onkeyup="appendMessage('up: ' + event.keyCode)"
onkeypress="appendMessage('press: ' + event.keyCode)"
onkeydown="displayMessage(''); appendMessage('down: ' + event.keyCode)" />
<input name="suppress" onkeydown="if (event.preventDefault) event.preventDefault(); event.returnValue = false; return false;" onkeypress="appendMessage('press');"/>
</form>
</div>
<!-- Used for testing styles -->
<div style="background-color: green;" id="green-parent">
<p id="style1">This should be greenish</p>
<ul>
<li id="green-item">So should this</li>
<li id="red-item" style="background-color: red;">But this is red</li>
</ul>
</div>
<p id="zeroheight" style="height:0px;">This is a foo</p>
<p id="zerowidth" style="width:0;">This is a bar</p>
<a href="#" id="close" onclick="window.close();">Close window</a>
<div id="delete" onclick="var d = document.getElementById('deleted'); this.removeChild(d);">
<p id="deleted">I should be deleted when you click my containing div</p>
<p>Whereas, I should not</p>
</div>
<div>
<span id="hideMe" onclick="this.style.display = 'none';">Click to hide me.</span>
</div>
<div style="margin-top: 10px;">
Click actions delayed by 3000ms:
<div id="clickToShow" onclick="delayedShowHide(3000, true);"
style="float: left;width: 100px;height:100px;border: 1px solid black;">
Click to show black box
</div>
<div id="clickToHide" onclick="delayedShowHide(3000, false);"
style="float: left;width: 100px;height:100px;border: 1px solid black;
background-color: black; color: white; display: none;">
Click to hide black box
</div>
<div style="clear: both"></div>
</div>
</body>
</html>