TJ wrote:
[snip]
As a said above, the primary point of this project is to teach myself
some JavaScript ... this is a great example for me to break apart a
digest! Thanks a million for taking the time to put it together and post
it! I'll definite make time this weekend to play with it ...
This is just an example, it is not really suitable for the web since
without JavaScript it doesn't work at all and whilst I've stuck to
standards, it will be intolerant of some (particularly older) browsers
- but it is a bit of fun trying to do some of this stuff and create
dynamic pages. This sort of stuff is best suited to intranet or
special interest groups anyway.
I have tested it in fairly recent versions of Safari, IE and Firefox
and it works fine. You can re-size the text and everything stays in
proportion (I've used ems for nearly all measurements).
An interesting thing I came across was getting text to middle align in
a div. Text will top-align with a div by default, no amount of
alignment statements will change that - the CSS text-align property
horizontally aligns text, not vertically. You have to use the line
height to get the text to align - so set the line-height to the same as
the div height and hey presto, middle aligned text.
Below is the final code, more concise, with Mike's suggested mods and
some comments. The div:empty should be ignored by browsers that don't
support it, at worst the empty divs will display as you add text to
them (which isn't such a bad thing, but a bit confusing at first).
Cheers, Rob.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Knockout Results</title>
<script type="text/javascript">
function togWin(x) {
if (nextIs(x) // If there is a next node
&& x.childNodes.length != 0 // and this node has a player
&& pairIs(x).childNodes.length!=0) { // and the pair has a player
// See if the other player has already been promoted & fix
checkTree(nextIs(x),pairIs(x).childNodes[0].data);
// Promote player - write name to next node
nextIs(x).innerHTML=(x.childNodes[0].data);
// Change next node style
nextIs(x).className='competitor';
// If promoted to last node, then ultimate winner
if (!pairIs(nextIs(x))) {
nextIs(x).className='Xwinner';
// alert('The winner is: '+x.childNodes[0].data);
}
// Toggle the class of the current node and pair
if (x.className == 'competitor'
|| x.className == 'loser') {
x.className = 'winner';
pairIs(x).className='loser';
}
}
}
// find the pair of the node
// 1_1 -> 1_2, 2_4 -> 2_3
function pairIs(p) {
var b = p.id.split('_');
// (b[1]%2 == '1')? b[1] -= -1:b[1]-=1;
(b[1]%2 == 1)? b[1] = +b[1]+1 : b[1] = +b[1]-1;
return document.getElementById(b.join('_'));
}
// find the next match slot
// 1_2 or 1_1 -> 2_1
function nextIs(n) {
var a = n.id.split('_');
a[1] = Math.floor((+a[1]+1)/2);
a[0] = +a[0]+1;
return document.getElementById(a.join('_'));
}
function checkTree(nod,nam) {
// if the next node already has the name in it,
// fix and make the pair not a winner.
if(nod.childNodes.length != 0) {
if (nod.childNodes[0].data) {// == nam) {
nod.innerHTML = '';
nod.className = 'competitor';
if (pairIs(nod)) {
pairIs(nod).className = 'competitor';
checkTree(nextIs(nod),nam);
}
}
}
}
</script>
<style type="text/css">
body {
font-family: sans-serif;
margin-left: 40px; margin-top: 10px;}
..loser, .competitor, .winner, .Xwinner {
font-size: 1em;
font-family: sans-serif;
width: 6em;
height: 1.5em;
line-height: 1.5em;
border-top: 1px solid #eee;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid #eee;
position: absolute;
text-align: left;
padding-left: 0.5em;
}
div:empty {
background-color: white;
font-weight: normal;
}
..loser, .competitor {
background-color: white;
font-weight: normal;
}
..loser {
color: #999;
text-decoration: line-through;
}
..winner, .Xwinner {
background-color: #eef;
font-weight: bold;
display:table-cell;
vertical-align:bottom;
}
..Xwinner {
border:thick solid red;
}
..head {
font-size: 1.2em;
width: 6em;
height: 1.5em;
background-color: white;
position: absolute;
font-weight: bold
}
</style>
</head>
<body>
<div style="position: relative; top:10px;">
<div class="head" style="left: 0em; top: 0em;">Round 1</div>
<div class="head" style="left: 6em; top: 0em;">Round 2</div>
<div class="head" style="left: 12em; top: 0em;">Round 3</div>
<div class="head" style="left: 18em; top: 0em;">Round 4</div>
<!-- Round One -->
<div id="1_1" class="competitor" style="left: 0em; top: 2em;"
onclick="togWin(this);">Steve</div>
<div id="1_2" class="competitor" style="left: 0em; top: 4em;"
onclick="togWin(this);">Sam</div>
<div id="1_3" class="competitor" style="left: 0em; top: 7em;"
onclick="togWin(this);">Sally</div>
<div id="1_4" class="competitor" style="left: 0em; top: 9em;"
onclick="togWin(this);">Wendy</div>
<div id="1_5" class="competitor" style="left: 0em; top: 12em;"
onclick="togWin(this);">Peter</div>
<div id="1_6" class="competitor" style="left: 0em; top: 14em;"
onclick="togWin(this);">Ivana</div>
<div id="1_7" class="competitor" style="left: 0em; top: 17em;"
onclick="togWin(this);">Katcha</div>
<div id="1_8" class="competitor" style="left: 0em; top: 19em;"
onclick="togWin(this);">Abdulla</div>
<div class="space"></div>
<!-- Round Two -->
<div id="2_1" class="competitor"
style="position: absolute; left: 6em; top: 3em;"
onclick="togWin(this);"></div>
<div id="2_2" class="competitor"
style="position: absolute; left: 6em; top: 8em;"
onclick="togWin(this);"></div>
<div id="2_3" class="competitor"
style="position: absolute; left: 6em; top: 13em;"
onclick="togWin(this);"></div>
<div id="2_4" class="competitor"
style="position: absolute; left: 6em; top: 18em;"
onclick="togWin(this);"></div>
<!-- Round Three -->
<div id="3_1" class="competitor"
style="position: absolute; left: 12em; top: 5.5em;"
onclick="togWin(this);"></div>
<div id="3_2" class="competitor"
style="position: absolute; left: 12em; top: 15.5em;"
onclick="togWin(this);"></div>
<!-- Round Four -->
<div id="4_1" class="competitor"
style="position: absolute; left: 18em; top: 10.5em;"
onclick="togWin(this);"></div>
</div>
</body>
</html>