Swapping bgcolor in table cell

tonicvodka · Aug 8, 2005

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

Safalra · Aug 8, 2005

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

ink;
}
.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>

tonicvodka · Aug 8, 2005

Excellent!

Thanks, that really solved the problem.

Best regards,
Niclas Colleen

Safalra · Aug 8, 2005

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.

Safalra · Aug 8, 2005

Safalra said:
tonicvodka said:

Thanks, that really solved the problem.

Click to expand...

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/

Els · Aug 8, 2005

Safalra said:
http://www.safalra.com/special/googlegroupsreply/

Thanks for making that page, bookmarked it so I can throw it at
GG-non-quoters in other groups as well

Having trouble centering contents of td ?	3	May 2, 2023
Help needed with thank you message	5	Sep 11, 2021
Why is the e.target not working here?	1	Dec 29, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Help me sort out this script	1	Oct 17, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Please Help?	0	Jul 23, 2022
Login button code	8	Jul 7, 2021

Swapping bgcolor in table cell

tonicvodka

Safalra

tonicvodka

Safalra

Safalra

Els

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads