Swapping bgcolor in table cell


T

tonicvodka

Hi all!

I'm building a site where you can book a summer house a certain week.


You book a week by clicking on that certain td-cell in a table containg
all 52 weeks.
That cell's color then switches from green to blue for reserving and
blue to red for taking it and back to green again if you click it a
third time.

The problem I'm having is that clicking on it too rapidly marks the
text, as in double clicking on it.

Would anyone now any good way of solving this?

The code looks like this:

<html>
<head></head>
<body>
<style>
.weekAvailable { BORDER-STYLE: solid; BORDER-COLOR: green;
BORDER-WIDTH: 1px; BACKGROUND-COLOR: lightgreen; TEXT-ALIGN: center;
CURSOR: hand; }
.weekReserved { BORDER-STYLE: solid; BORDER-COLOR: blue; BORDER-WIDTH:
1px; BACKGROUND-COLOR: cyan; TEXT-ALIGN: center; CURSOR: hand; }
.weekSublet { BORDER-STYLE: solid; BORDER-COLOR: red; BORDER-WIDTH:
1px; BACKGROUND-COLOR: pink; TEXT-ALIGN: center; CURSOR: hand; }
</style>

<script>
function switchStatus(obj)
{
if(obj.className == "weekAvailable")
{
obj.className = "weekReserved";
}
else
{
if(obj.className == "weekReserved")
{
obj.className = "weekSublet";
}
else
{
obj.className = "weekAvailable";
}
}
}
</script>
<table cellpadding=2 cellspacing=4 border=0 ID="Table1">
<tr><td id="week1" class="weekAvailable" onclick="switchStatus(this);"
runat="server">52</td></tr>
</table>
</body>
</html>



Best regards,
Niclas Colleen
 
Ad

Advertisements

S

Safalra

tonicvodka said:
I'm building a site where you can book a summer house a certain week.
You book a week by clicking on that certain td-cell in a table containg
all 52 weeks.
That cell's color then switches from green to blue for reserving and
blue to red for taking it and back to green again if you click it a
third time.
The problem I'm having is that clicking on it too rapidly marks the
text, as in double clicking on it.
[snip original code]

Try this (code shown below):

http://www.safalra.com/temporary/cover.html

It covers the number with a <div> to stop it being selected (unless you
click right on the edge of the table cell). Note that the two 'width'
values in the stylesheet must be equal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cover demonstration</title>
<style type="text/css">
td{
width:2em;
text-align:center;
}
.weekAvailable{
border:1px solid green;
background:lightgreen;
}
.weekReserved{
border:1px solid blue;
background:cyan;
}
.weekSublet{
border:1px solid red;
background:pink;
}
.cover{
position:absolute;
width:2em;
height:1em;
cursor:hand;
}
</style>
<script type="text/javascript">
function switchStatus(obj){
if(obj.className == "weekAvailable"){
obj.className = "weekReserved";
}else if(obj.className == "weekReserved"){
obj.className = "weekSublet";
}else{
obj.className = "weekAvailable";
}
}
</script>
</head>
<body>
<table cellpadding="2" cellspacing="4" border="0" ID="Table1">
<tr>
<td id="week49" class="weekAvailable"
onclick="switchStatus(this);">
<div class="cover"></div>49
</td>
<td id="week50" class="weekAvailable"
onclick="switchStatus(this);">
<div class="cover"></div>50
</td>
</tr>
<tr>
<td id="week51" class="weekAvailable"
onclick="switchStatus(this);">
<div class="cover"></div>51
</td>
<td id="week52" class="weekAvailable"
onclick="switchStatus(this);">
<div class="cover"></div>52
</td>
</tr>
</table>
</body>
</html>
 
T

tonicvodka

Excellent!

Thanks, that really solved the problem.

Best regards,
Niclas Colleen
 
S

Safalra

tonicvodka said:
Thanks, that really solved the problem.

On the subject of problems, in future could you please quote the
message to which you are replying? (It makes it easier for people to
understand.) It seems you're using Google Groups: rather then clicking
the 'Reply' link under the message, instead click on 'Show options'
next to the author's name and then click the 'Reply' link that appears
under the subject line. Thanks.
 
S

Safalra

Safalra said:
tonicvodka said:
Thanks, that really solved the problem.

On the subject of problems, in future could you please quote the
message to which you are replying? (It makes it easier for people to
understand.) It seems you're using Google Groups: [snip]

I keep having to explain this, so here's an illustrated guide (which is
much clearer than my explanation in the previous message:

http://www.safalra.com/special/googlegroupsreply/
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top