Swapping bgcolor in table cell

Discussion in 'HTML' started by tonicvodka, Aug 8, 2005.

  1. tonicvodka

    tonicvodka Guest

    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
     
    tonicvodka, Aug 8, 2005
    #1
    1. Advertisements

  2. tonicvodka

    Safalra Guest

    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>
     
    Safalra, Aug 8, 2005
    #2
    1. Advertisements

  3. tonicvodka

    tonicvodka Guest

    Excellent!

    Thanks, that really solved the problem.

    Best regards,
    Niclas Colleen
     
    tonicvodka, Aug 8, 2005
    #3
  4. tonicvodka

    Safalra Guest

    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
    #4
  5. tonicvodka

    Safalra Guest

    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/
     
    Safalra, Aug 8, 2005
    #5
  6. tonicvodka

    Els Guest

    Els, Aug 8, 2005
    #6
    1. 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 (here). After that, you can post your question and our members will help you out.