susanBuck/gist:901781

## gistfile1.txt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> The Big Type Experiment </title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

	<script type="text/javascript">

	document.onkeypress = keyPressed;


	/*-------------------------------------------------------------------------------------------------
	keyPressed
	-------------------------------------------------------------------------------------------------*/
	function keyPressed(evt) {

		var characterCode;

		if(!evt) {
			characterCode = window.event.keyCode;
		}
		else {
			if(evt && evt.which) characterCode = evt.which;
			else characterCode = evt.event.charCode;
		}

		var keyThatWasPressed = String.fromCharCode(characterCode);

		var curW = parseFloat($('userInput').getStyle('width'));
		var newW = curW + 300;

		$('userInput').style.width = newW + "px";

		$('userInput').innerHTML += keyThatWasPressed;

	}

	</script>

	<style type='text/css'>

	#box {
		position:absolute;
		left:100px;
		top:20px;
		width:850px;
		height:550px;
		padding:10px;
		border:1px solid black;
		overflow:hidden;
	}

	#userInput {
		position:absolute;
		right:0px;
		top:0px;
		height:550px;
		font-size:400pt;
		text-align:right;
		border:2px solid red;
	}

	#cursor {
		position:absolute;
		left:900px;
		top:50px;
	}

	</style>

</head>

<body>

	<div id='box'>
		<div id='userInput'>
		</div>
	</div>

	<div id='cursor'><img src="/web1/projects/project4/images/cursor.gif"></img></div>

</body>

</html>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	<html>

	<head>

	<title> The Big Type Experiment </title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

	<script type="text/javascript">

	document.onkeypress = keyPressed;


	/*-------------------------------------------------------------------------------------------------
	keyPressed
	-------------------------------------------------------------------------------------------------*/
	function keyPressed(evt) {

	var characterCode;

	if(!evt) {
	characterCode = window.event.keyCode;
	}
	else {
	if(evt && evt.which) characterCode = evt.which;
	else characterCode = evt.event.charCode;
	}

	var keyThatWasPressed = String.fromCharCode(characterCode);

	var curW = parseFloat($('userInput').getStyle('width'));
	var newW = curW + 300;

	$('userInput').style.width = newW + "px";

	$('userInput').innerHTML += keyThatWasPressed;

	}

	</script>

	<style type='text/css'>

	#box {
	position:absolute;
	left:100px;
	top:20px;
	width:850px;
	height:550px;
	padding:10px;
	border:1px solid black;
	overflow:hidden;
	}

	#userInput {
	position:absolute;
	right:0px;
	top:0px;
	height:550px;
	font-size:400pt;
	text-align:right;
	border:2px solid red;
	}

	#cursor {
	position:absolute;
	left:900px;
	top:50px;
	}

	</style>

	</head>

	<body>

	<div id='box'>
	<div id='userInput'>
	</div>
	</div>

	<div id='cursor'><img src="/web1/projects/project4/images/cursor.gif"></img></div>

	</body>

	</html>