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
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