|
CS479/579 - Web Programming II
| Displaying exercises/e3/solution/sizer.html
<!DOCTYPE html>
<html>
<head>
<title> Sizer </title>
<meta charset='utf-8'>
<style>
table { border: 1px solid black; border-collapse: collapse; }
#box {
border-width: 1px; border-style: solid; border-color: black;
width: 100px; height: 100px;
text-align: center;
}
</style>
<script>
function get(id) { return document.getElementById(id); }
function set(what, unit, v) {
get("box").style[what] = v + unit;
get(what).innerHTML = v;
}
function reset() {
get("r1").value = get("r2").value = 100;
get("r3").value = 1;
get("r4").value = 'solid';
}
</script>
</head>
<body onload='reset();'>
<table>
<tbody>
<tr>
<td> Width:
<td><input id='r1' type='range' min=0, max=500 value=100 oninput='set("width","px",this.value);'>
<td id=width> 100
<tr>
<td> Height:
<td> <input id='r2' type='range' min=0, max=500 value=100 oninput='set("height","px",this.value);'>
<td id=height> 100
<tr>
<td> Border:
<td> <input id='r3' type='range' min=1 max=20 value=1 oninput='set("borderWidth","px",this.value);'>
<td id='borderWidth'> 1
<tr>
<td> Type:
<td>
<select id='r4' onchange='set("borderStyle","",this.value);'>
<option>none</option>
<option>hidden</option>
<option>dotted</option>
<option>dashed</option>
<option default>solid</option>
<option>double</option>
<option>groove</option>
<option>ridge</option>
<option>inset</option>
<option>outset</option>
</select>
<td id='borderStyle'> solid
</tbody>
</table>
<br>
<div id='box'>X</div>
</body>
</html>
|