Menu
My attempt to simulate a roll-a-dex card pile is below.
What it is designed to do and what it does are dynamic opposites.
[code=php]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Rolex Cards </title>
<style type=”text/css”>
.cards { position:absolute;
top:200px; left:200px;
width:30%; height:30%;
border:1px solid red; z-index:1; }
</style>
</head>
<body>
<div id=”contents”>
<div class=”cards”>1</div>
<div class=”cards”>2</div>
<div class=”cards”>3</div>
<div class=”cards”>4</div>
<div class=”cards”>5</div>
</div>
<script type=”text/javascript”>
function init () {
var colors = [‘red’,’orange’,’green’,’blue’,’magenta’];
var sel = document.getElementById(‘contents’).getElementsByClassName(‘cards’);
for (var i=0; i<sel.length; i++) {
sel[i].top = (200 – (20*i))+’px’;
sel[i].left = (200 + (20*i))+’px’;
sel[i].zIndex = 1 + (i*2);
sel[i].borderColor = colors[i];
}
} init();
/* should give following (but does not)
|———–|
|5 |
|———–| |
|4 |–|
|———–| |
|3 |–|
|———–| |
|2 |–|
|———–| |
|1 |–|
| |
|———–|
*/
</script>
</body>
</html>
Any idea why I’m not getting expected? Should I use ‘relative’ rather than ‘absolute’? (tried that with worse displayed output)