Miscellany

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>A checklist, the cool way!</title>
<style type="text/css">
/*<![CDATA[*/
div input
{
	padding: 0px;
	margin: 0px;
	text-align: center;
	border: 1px solid blue;
	color: blue;
	background: white;
}
div
{
	line-height: 20px;
	padding: 0px;
	margin: 0px;
	border: 1px solid black; 
	width: 200px;
	text-align: center;
	overflow: hidden;
}
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
var dblClick = false;


function changeTitle(e)
{
	dblClick = true;
	var obj = document.getElementById('note');
	obj.style.display = "none";
	e = (!e) ? window.event : e;
	var obj = (e.target) ? e.target : e.srcElement;
	var input = document.createElement('input');

	input.type = "text";
	input.value = obj.innerHTML;
	input.onkeyup = (input.onblur = setTitle);

	obj.onclick = null;
	obj.innerHTML = '';
	obj.appendChild(input);
	input.focus();
	input.select();
	dblClick = false;
}

function setTitle(e)
{
	e = (!e) ? window.event : e;
	var obj = (e.target) ? e.target : e.srcElement;

	if(e.keyCode == 13 || e.type == 'blur')
	{
		obj.parentNode.onclick = showNote;
		obj.parentNode.ondblclick = changeTitle;
		obj.parentNode.innerHTML = obj.value;
	}
}

function showNote()
{
	if (dblClick) return;	
	var obj = document.getElementById('note');

	if(obj.style.display == "block")
	{
		obj.style.display = "none";
	}
	else
	{
		obj.style.display = "block";
	}

}
//]]>
</script>
</head>
<body>

<div onclick="showNote();" ondblclick="changeTitle(event);">
Mr. Note
</div>

<div id="note" style="display: none; text-align: left;">
Hello, I am a note.<br />
How are you? And what are you doing?<br />
<br />
If you want to change my tittle,<br />
then you just have to double click on it,<br />
type something new and hit enter.<br />
<br />
Yours truely, Note.
</div>

</body>
</html>