javascript.dhtml.testing.xhtml

<!-- I went looking through the HDD of my old Thinkpad 600 and found
some documents and scripts that I wrote when I was learning JavaScript,
circa 2007. I figured I'd keep them around because they're neat :) -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="author" content="Matthew K Poer" />

<style type="text/css">
#image, #right, #left {
border:1px solid black;
}
#swap{border:3px dotted black;padding:10px;position:absolute;bottom:100px;right:150px;left:150px;background-color:purple;height:40px;}
#right{position:absolute;right:50px;padding:2px;width:100px;height:30px;background-color:pink;}
#left{position:absolute;left:50px;padding:2px;width:100px;height:30px;background-color:lightblue;}
#inputform{position:absolute;top:10px;left:10px;}
#form{}
#textform{border:1px solid black;padding:1px;}
#write{position:absolute;bottom:200px;left:300px;right:300px;height:100px;border:1px solid black;}
</style>
<script type="text/javascript">
function showposition(id){
  var posy = document.getElementById(id).style.top;
  var posx = document.getElementById(id).style.left;
  posy = posy.slice(0, -2);
  posx = posx.slice(0, -2);
  alert("This element, who's id is '"+id+"' is positioned at "+posx+" by "+posy);
}
function toggle(id){
 if (id == "right"){
  document.getElementById('right').style.display = "none";
  document.getElementById('left').style.display = "block";
 }
 else if (id == "left"){
  document.getElementById('right').style.display = "block";
  document.getElementById('left').style.display = "none";
 }
 else {
  alert("omg! wtf?")
 }
}
</script>
<script type="text/javascript">
// WriteFromTextField.js
//
// HTML of field should include these attributes:
// <input type='text' onkeyup='WriteFromTextField(this.id);' id='Identifier' />
//
// The element created by this script is <div> with the id 'write'
// So create your CSS accordingly
//
// I learned this from the JavaScript & DHTML Cookbook by Danny Goodman
// Lessons 14.9, 14.10, and 14.14
//
// Let's begin...

function WriteFromTextField(id) {
 var element = document.getElementById('write');
 var text = document.getElementById(id).value;
 var text = document.createTextNode(text);
 if (element){
  element.replaceChild(text, element.firstChild);
 } else {
  var element = document.createElement('div');
  element.id = 'write';
  element.appendChild(text);
  document.body.appendChild(element);
 }
}
</script>
<title>Javascript and DHTML Testing</title>
</head>

<body>
<img src="../media/images/tux2-small.png" alt="Tux" id="image" style="position:absolute;top:150px;left:150px;" onclick="showposition(this.id);"/>
<div id="swap">
 <div id="right" onmouseover="toggle(this.id)" style="display:none;">Mouse Me</div>
 <div id="left" onclick="toggle(this.id)" style="display:block;">Click Me</div>
</div>
<div id="inputform">
 <form id="form">
  <input type="text" id="textform" value="This Text Goes Away" onclick="this.value=''" onkeyup="WriteFromTextField(this.id);" />
 </form>
</div>
</body>
</html>