Printable View
I need to create a ranking system that allows the user to click in a particular block at which time that block and all previous blocks will turn the color red.
I have attached a sample screenshot of what it would look like if the user clicked in block two. If the user clicked in block one, block two would clear, etc.
I really prefer to make this grid using DIV/CSS, rather than a Table.
Any help would be appreciated.
Hi there dbassettt74,
have a look at this example, it may suit your requirements....
Note:- double clicking the first box will clear all the boxes. ;)Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
body {
background-color:#f0f0f0;
}
#boxes {
width:186px;
height:18px;
padding:0;
border:1px solid #000;
border-right:0;
margin:40px auto 0;
list-style-type:none;
}
#boxes li {
float:left;
width:30px;
height:18px;
border-right:1px solid #000;
}
.white {
background-color:#fff;
}
.red {
background-color:#f60400;
}
</style>
<script type="text/javascript">
function colorBoxes(){
l=document.getElementById('boxes').getElementsByTagName('li');
for(c=0;c<l.length;c++) {
l[c].number=c;
l[c].onclick=function() {
for(c=0;c<l.length;c++) {
if(l[c].number<=this.number) {
l[c].className='red';
}
else {
if(l[c].number>this.number) {
l[c].className='white';
}
}
}
}
}
l[0].ondblclick=function() {
if(this.className=='red'){
this.className='white';
}
}
}
if(window.addEventListener){
window.addEventListener('load',colorBoxes,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',colorBoxes);
}
}
</script>
</head>
<body>
<ul id="boxes">
<li class="white"></li>
<li class="white"></li>
<li class="white"></li>
<li class="white"></li>
<li class="white"></li>
<li class="white"></li>
</ul>
</body>
</html>
NICE! As always man, you came through. Thanks for the great example!
No problem, you're very welcome. ;)
Would it be hard to modify this so that I can specify the width and height of the outside of the div, and the internal squares will resize proportionally? So the inside squares will not be a fixed height width, rather, they will resize with the outside dimensions. Thanks!
Hi there dbassettt74,
the table element is the ideal element to use for your new specification. ;)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>little boxes</title>
<style type="text/css">
#container {
width:800px;
height:100px;
margin:auto;
}
#boxes {
width:100%;
height:100%;
border-collapse:collapse;
}
#boxes td {
border:1px solid #000;
text-align:center;
}
.white {
background-color:#fff;
}
.red {
background-color:#f60400;
}
</style>
<script type="text/javascript">
function colorBoxes(){
l=document.getElementById('boxes').getElementsByTagName('td');
for(c=0;c<l.length;c++) {
l[c].number=c;
l[c].onclick=function() {
for(c=0;c<l.length;c++) {
if(l[c].number<=this.number) {
l[c].className='red';
}
else {
if(l[c].number>this.number) {
l[c].className='white';
}
}
}
}
}
l[0].ondblclick=function() {
if(this.className=='red'){
this.className='white';
}
}
}
if(window.addEventListener){
window.addEventListener('load',colorBoxes,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',colorBoxes);
}
}
</script>
</head>
<body>
<div id="container">
<table id="boxes"><tr>
<td>1</td><td>2</td><td>3</td>
<td>4</td><td>5</td><td>6</td>
</tr></table>
</div>
</body>
</html>