Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    si1
    si1 is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background colour of each cell to change and stay changed.

    I have a code and would like to change the background colour of each cell from white, to grey, to red to blue and back again, by clicking on it and the settings to stay there for any user who visits the site to see.
    This is the code any help would be appreciated thank in advance.

    <table id="table_1" cellspacing="0" cellpadding="0" style="background-color:#ffffff; border-collapse: collapse; position:absolute; left:100px; top:439px; width:211px; height:136px; " >

    <tr id="table_1_R01">

    <td id="table_1_R01C01" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">Su</span></p>
    </td>


    <td id="table_1_R01C02" style="width:15%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">Mo</span></p>
    </td>


    <td id="table_1_R01C03" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">Tu</span></p>
    </td>


    <td id="table_1_R01C04" style="width:16%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">We</span></p>
    </td>


    <td id="table_1_R01C05" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">Th</span></p>
    </td>


    <td id="table_1_R01C06" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">Fr</span></p>
    </td>


    <td id="table_1_R01C07" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C">Sa</span></p>
    </td>

    </tr>
    <tr id="table_1_R02">

    <td id="table_1_R02C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
    </td>


    <td id="table_1_R02C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
    </td>


    <td id="table_1_R02C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
    </td>


    <td id="table_1_R02C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
    </td>


    <td id="table_1_R02C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">1</span></p>
    </td>


    <td id="table_1_R02C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">2</span></p>
    </td>


    <td id="table_1_R02C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">3</span></p>
    </td>

    </tr>
    <tr id="table_1_R03">

    <td id="table_1_R03C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">4</span></p>
    </td>


    <td id="table_1_R03C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">5</span></p>
    </td>


    <td id="table_1_R03C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">6</span></p>
    </td>


    <td id="table_1_R03C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">7</span></p>
    </td>


    <td id="table_1_R03C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">8</span></p>
    </td>


    <td id="table_1_R03C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">9</span></p>
    </td>


    <td id="table_1_R03C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">10</span></p>
    </td>

    </tr>
    <tr id="table_1_R04">

    <td id="table_1_R04C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">11</span></p>
    </td>


    <td id="table_1_R04C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">12</span></p>
    </td>


    <td id="table_1_R04C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">13</span></p>
    </td>


    <td id="table_1_R04C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">14</span></p>
    </td>


    <td id="table_1_R04C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">15</span></p>
    </td>


    <td id="table_1_R04C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">16</span></p>
    </td>


    <td id="table_1_R04C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">17</span></p>
    </td>

    </tr>
    <tr id="table_1_R05">

    <td id="table_1_R05C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">18</span></p>
    </td>


    <td id="table_1_R05C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">19</span></p>
    </td>


    <td id="table_1_R05C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">20</span></p>
    </td>


    <td id="table_1_R05C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">21</span></p>
    </td>


    <td id="table_1_R05C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">22</span></p>
    </td>


    <td id="table_1_R05C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">23</span></p>
    </td>


    <td id="table_1_R05C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">24</span></p>
    </td>

    </tr>
    <tr id="table_1_R06">

    <td id="table_1_R06C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">25</span></p>
    </td>


    <td id="table_1_R06C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">26</span></p>
    </td>


    <td id="table_1_R06C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">27</span></p>
    </td>


    <td id="table_1_R06C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">28</span></p>
    </td>


    <td id="table_1_R06C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">29</span></p>
    </td>


    <td id="table_1_R06C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">30</span></p>
    </td>


    <td id="table_1_R06C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
    <p class="Normal-P"><span class="Normal-C0">31</span></p>
    </td>

    </tr>

    </table>

    I have been told I will need to use javascript functions to do this.
    Example
    <td id="table_1_R06C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " onclick="changeColor(table_1_R06C07);">

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by si1 View Post
    I have a code and would like to change the background colour of each cell from white, to grey, to red to blue and back again, by clicking on it and the settings to stay there for any user who visits the site to see.
    1) that's fairly straight forward. Just add an onclick event handler to each cell (similar to the example at the end of your post) to cycle the background colour to the next color on each click. Store the current color of the cell either in cookies or a database if you want the colours to be the same on the next visit to the page..

    2) Your posted code would be easier to read if you wrap it in code tags by first highlighting the code and then click the # icon in the editor's toolbar.
    Last edited by webdev1958; 03-08-2012 at 12:39 PM.

  • #3
    si1
    si1 is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok Thank you webdev1958 and I am very sorry this is going to make me sound stupid I am extreamly new to all of this I have a code and it doesnt seem to work sorry.

    <script>

    function changeColor
    {
    if (cell.style.backgroundColor == "white")
    onclick="changeColor(table_1_R01C01);">
    onclick="blue, red, green"

    </script>



    <table id="table_1" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; position:absolute; left:129px; top:324px; width:458px; height:203px; " >

    <tr id="table_1_R01">

    <td id="table_1_R01C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; background-color:#ffffff; "
    <td onclick="changeColor(table_1_R01C01);">
    <p class="Normal-P"><span class="Normal-C">mo</span></p>
    </td>

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by si1 View Post
    Ok Thank you webdev1958 and I am very sorry this is going to make me sound stupid I am extreamly new to all of this I have a code and it doesnt seem to work sorry.
    Did you understand point 2 in my previous post?

    2) Your posted code would be easier to read if you wrap it in code tags by first highlighting the code and then click the # icon in the editor's toolbar.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Below is a basic KISS example to help you get started.

    The cells' bg colour changes on each click but the current cell colors are not stored anywhere yet for use beyond the current browser session.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <table id="myTbl" cellpadding="20" cellspacing="0">
                <tr>
                    <td>R1C1</td>
                    <td>R1C2</td>
                    <td>R1C3</td>
                </tr>
                <tr>
                    <td>R2C1</td>
                    <td>R2C2</td>
                    <td>R2C3</td>
                </tr>
                <tr>
                    <td>R3C1</td>
                    <td>R3C2</td>
                    <td>R3C3</td>
                </tr>
            </table>
            <script type="text/javascript">
                var tdOA = document.getElementById('myTbl').getElementsByTagName('td');
                var cellColours = ['white','grey','red','blue'];
                //assign the initial cell colour to each cell and the onclicks
                for(i=0; i < tdOA.length; i++){
                    tdOA[i].curCol = 0;
                    tdOA[i].style.backgroundColor = cellColours[tdOA[i].curCol];
                    tdOA[i].onclick=function(){
                        this.curCol = (++this.curCol == cellColours.length)? 0 : this.curCol;
                        this.style.backgroundColor = cellColours[this.curCol];
                    }
                }
            </script>
        </body>
    </html>
    Last edited by webdev1958; 03-09-2012 at 12:00 AM.

  • Users who have thanked webdev1958 for this post:

    si1 (03-09-2012)

  • #6
    si1
    si1 is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh that it fantastic webdev1958 thank you ever so much I'm stating to looking into storing the cell colors, and again thank you.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    I would use cookies to store the user selected cell colours as long as a small number of users having cookies switched off in their browser is not an issue.

    If you need more help, post back with your code

  • Users who have thanked webdev1958 for this post:

    si1 (03-09-2012)

  • #8
    si1
    si1 is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello webdev1958 I have been looking at a cookie code but it doesn't seem to work thank you in advance.

    function setCookie(color, grey, red, blue) {
    if (typeof expires == "string") {
    document.cookie = encodeURIComponent(key) + "=" +
    encodeURIComponent(value) +
    ";expires=" + expires;
    } else {
    document.cookie = encodeURIComponent(key) + "=" +
    encodeURIComponent(value);
    }
    }

    function readCookie(color) {
    var allCookies = document.cookie;
    key = encodeURIComponent(key);
    var pos = allCookies.indexOf(key + '=');
    var storedColor = readCookie("color");
    if (pos != -1) {
    var start = pos + 1 + key.length;
    var end = allCookies.indexOf(';', start);
    if (end == -1)
    end = allCookies.length;
    return decodeURIComponent(allCookies.substring(start, end));
    }
    }

  • #9
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    this is the second time you have ignored a request to wrap you code in code tags.

    Quote Originally Posted by webdev1958 View Post

    2) Your posted code would be easier to read if you wrap it in code tags by first highlighting the code and then click the # icon in the editor's toolbar.
    It's obviously your choice to do, just as it is my choice to then not waste time looking at unwrapped code.

    Hopefully someone else will come along to show you what you have done wrong.

    Good luck
    Last edited by webdev1958; 03-09-2012 at 11:56 PM.

  • #10
    si1
    si1 is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm sorry it's not that I'm ignoring your request to wrap the code I don't know how I am very sorry


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •