#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    hawaii
    Posts
    4
    Rep Power
    0

    JavaScript updating CSS problems!


    First of all, I'd like to thank adios for his help on my earlier problem.

    I have another problem now, and I don't know if it's with the javascript or the way my computer is set up.

    I built a color table, and I'm coding each cell to change the color on the CSS in accordance with the color of the cell. I've got the first row of cells coded, and the second row is almost done.

    The strange thing is, is when I try to code the next cell (the one marked in green), then then when I preview it in a browser (IE or Netscape) it goes wacko and does not seem to read the HTML correctly. Again, maybe its just how my computer is set up, but I don't know.

    I'll just include all the code here (I'll attach it also since I had to delete some lines, it was too long for the message):

    <html>
    <head>
    <title>ChangeText</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <style type="text/css">

    #changeText{font: times new roman;
    color: #0066FF;
    font-size: 22;
    }

    </style>

    <script language="JavaScript">
    function changeFont(value){
    document.getElementById("changeText").style.fontFamily = value;
    }
    function changeColor(id){
    document.getElementById("changeText").style.color = id;
    }
    function changeSize(value){
    document.getElementById("changeText").style.fontSize = value;
    }
    </script>


    <body>

    <div id="changeText">
    I love Monkeys
    </div>
    <br>


    <select name="Font" onChange="changeFont(this.value)">
    <option selected value="0">Choose a font</option>
    <option value="TimesNewRoman">Times New Roman</option>
    <option value="Arial">Arial</option>
    <option value="Courier">Courier</option>

    </select>

    <br>

    <select name="Color" onChange="changeColor(this.value)">
    <option selected value="0">Choose a color</option>
    <option value="#00CC00">Green</option>
    <option value="#0066FF">Blue</option>
    </select>

    <br>

    <select name="Size" onChange="changeSize(this.value)">
    <option selected value="0">Choose a font size</option>
    <option value="12">12</option>
    <option value="14">14</option>
    <option value="16">16</option>
    <option value="18">18</option>
    <option value="20">20</option>
    <option value="22">22</option>
    <option value="24">24</option>
    <option value="26">26</option>
    <option value="28">28</option>
    <option value="30">30</option>
    <option value="32">32</option>
    <option value="34">34</option>
    <option value="36">36</option>
    <option value="38">38</option>
    <option value="40">40</option>
    <option value="50">50</option>
    <option value="60">60</option>
    <option value="70">70</option>
    <option value="80">80</option>
    </select>
    <table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
    <td id="#000000" bgcolor="#000000" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#003300" bgcolor="#003300" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#006600" bgcolor="#006600" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#009900" bgcolor="#009900" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#00CC00" bgcolor="#00CC00" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#00FF00" bgcolor="#00FF00" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#330000" bgcolor="#330000" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#333300" bgcolor="#333300" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#336600" bgcolor="#336600" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#339900" bgcolor="#339900" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#33CC00" bgcolor="#33CC00" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#33FF00" bgcolor="#33FF00" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#660000" bgcolor="#660000" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#663300" bgcolor="#663300" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#666600" bgcolor="#666600" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#669900" bgcolor="#669900" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#66CC00" bgcolor="#66CC00" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#66FF00" bgcolor="#66FF00" onClick="changeColor(this.id)">&nbsp;</td>
    </tr>
    <tr>
    <td id="#000033" bgcolor="#000033" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#003333" bgcolor="#003333" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#006633" bgcolor="#006633" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#009933" bgcolor="#009933" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#00CC33" bgcolor="#00CC33" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#00FF33" bgcolor="#00FF33" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#330033" bgcolor="#330033" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#333333" bgcolor="#333333" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#336633" bgcolor="#336633" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#339933" bgcolor="#339933" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#33CC33" bgcolor="#33CC33" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#33FF33" bgcolor="#33FF33" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#660033" bgcolor="#660033" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#663333" bgcolor="#663333" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#666633" bgcolor="#666633" onClick="changeColor(this.id)">&nbsp;</td>
    <td id="#669933" bgcolor="#669933" onClick="changeColor(this.id)">&nbsp;</td>
    <td bgcolor="#66CC33">&nbsp;</td>
    <td bgcolor="#66FF33">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#000066">&nbsp;</td>
    <td bgcolor="#003366">&nbsp;</td>
    <td bgcolor="#006666">&nbsp;</td>
    <td bgcolor="#009966">&nbsp;</td>
    <td bgcolor="#00CC66">&nbsp;</td>
    <td bgcolor="#00FF66">&nbsp;</td>
    <td bgcolor="#330066">&nbsp;</td>
    <td bgcolor="#333366">&nbsp;</td>
    <td bgcolor="#336666">&nbsp;</td>
    <td bgcolor="#339966">&nbsp;</td>
    <td bgcolor="#33CC66">&nbsp;</td>
    <td bgcolor="#33FF66">&nbsp;</td>
    <td bgcolor="#660066">&nbsp;</td>
    <td bgcolor="#663366">&nbsp;</td>
    <td bgcolor="#666666">&nbsp;</td>
    <td bgcolor="#669966">&nbsp;</td>
    <td bgcolor="#66CC66">&nbsp;</td>
    <td bgcolor="#66FF66">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#000099">&nbsp;</td>
    <td bgcolor="#003399">&nbsp;</td>
    <td bgcolor="#006699">&nbsp;</td>
    <td bgcolor="#009999">&nbsp;</td>
    <td bgcolor="#00CC99">&nbsp;</td>
    <td bgcolor="#00FF99">&nbsp;</td>
    <td bgcolor="#330099">&nbsp;</td>
    <td bgcolor="#333399">&nbsp;</td>
    <td bgcolor="#336699">&nbsp;</td>
    <td bgcolor="#339999">&nbsp;</td>
    <td bgcolor="#33CC99">&nbsp;</td>
    <td bgcolor="#33FF99">&nbsp;</td>
    <td bgcolor="#660099">&nbsp;</td>
    <td bgcolor="#663399">&nbsp;</td>
    <td bgcolor="#666699">&nbsp;</td>
    <td bgcolor="#669999">&nbsp;</td>
    <td bgcolor="#66CC99">&nbsp;</td>
    <td bgcolor="#66FF99">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#0000CC">&nbsp;</td>
    <td bgcolor="#0033CC">&nbsp;</td>
    <td bgcolor="#0066CC">&nbsp;</td>
    <td bgcolor="#0099CC">&nbsp;</td>
    <td bgcolor="#00CCCC">&nbsp;</td>
    <td bgcolor="#00FFCC">&nbsp;</td>
    <td bgcolor="#3300CC">&nbsp;</td>
    <td bgcolor="#3333CC">&nbsp;</td>
    <td bgcolor="#3366CC">&nbsp;</td>
    <td bgcolor="#3399CC">&nbsp;</td>
    <td bgcolor="#33CCCC">&nbsp;</td>
    <td bgcolor="#33FFCC">&nbsp;</td>
    <td bgcolor="#6600CC">&nbsp;</td>
    <td bgcolor="#6633CC">&nbsp;</td>
    <td bgcolor="#6666CC">&nbsp;</td>
    <td bgcolor="#6699CC">&nbsp;</td>
    <td bgcolor="#66CCCC">&nbsp;</td>
    <td bgcolor="#66FFCC">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#0000FF">&nbsp;</td>
    <td bgcolor="#0033FF">&nbsp;</td>
    <td bgcolor="#0066FF">&nbsp;</td>
    <td bgcolor="#0099FF">&nbsp;</td>
    <td bgcolor="#00CCFF">&nbsp;</td>
    <td bgcolor="#00FFFF">&nbsp;</td>
    <td bgcolor="#3300FF">&nbsp;</td>
    <td bgcolor="#3333FF">&nbsp;</td>
    <td bgcolor="#3366FF">&nbsp;</td>
    <td bgcolor="#3399FF">&nbsp;</td>
    <td bgcolor="#33CCFF">&nbsp;</td>
    <td bgcolor="#33FFFF">&nbsp;</td>
    <td bgcolor="#6600FF">&nbsp;</td>
    <td bgcolor="#6633FF">&nbsp;</td>
    <td bgcolor="#6666FF">&nbsp;</td>
    <td bgcolor="#6699FF">&nbsp;</td>
    <td bgcolor="#66CCFF">&nbsp;</td>
    <td bgcolor="#66FFFF">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#990000">&nbsp;</td>
    <td bgcolor="#993300">&nbsp;</td>
    <td bgcolor="#996600">&nbsp;</td>
    <td bgcolor="#999900">&nbsp;</td>
    <td bgcolor="#99CC00">&nbsp;</td>
    <td bgcolor="#99FF00">&nbsp;</td>
    <td bgcolor="#CC0000">&nbsp;</td>
    <td bgcolor="#CC3300">&nbsp;</td>
    <td bgcolor="#CC6600">&nbsp;</td>
    <td bgcolor="#CC9900">&nbsp;</td>
    <td bgcolor="#CCCC00">&nbsp;</td>
    <td bgcolor="#CCFF00">&nbsp;</td>
    <td bgcolor="#FF0000">&nbsp;</td>
    <td bgcolor="#FF3300">&nbsp;</td>
    <td bgcolor="#FF6600">&nbsp;</td>
    <td bgcolor="#FF9900">&nbsp;</td>
    <td bgcolor="#FFCC00">&nbsp;</td>
    <td bgcolor="#FFFF00">&nbsp;</td>
    </tr>
    </table>


    </body>
    </html>


    I'd appreciate any input! Thanks in advance!

    duckboy
    Attached Files
    Last edited by duckboy; December 11th, 2002 at 04:15 PM.
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    If you put &nbsp; between your <td> tags then you get the colors appear, is that what you were after?
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    hawaii
    Posts
    4
    Rep Power
    0
    Sorry, I probably didn't explain it very well. What happens is in the green marked table cell (or any other one beyond that one, for that matter), when I input the id (which is identical to the background color), and add the colorChange function which listens for (this.id), which is the exact same thing I have done for the preceding table cells, then the browser starts to read the HTML wrong, and the whole table goes wacko on the browser. The strange thing is, whenever I refresh the page, the color table looks different every time, like the borwser is misinterpreting the HTML differently every time. I can't figure it out and it is driving me nuts! (Yeeeaaaagh!!!)

    But, yes, I found that if I don't have a space in the table then it doesn't work either, I guess because it doesn't have anything to use as a clickable area.

    duckboy
  6. #4
  7. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    IE 6.0.2600 seems to do as it's supposed to when ID and ONCLICK is added.

    One question, why are you writing so many rows and cells yourself. Just do a for loop with javascript to document.write() the rows.
  8. #5
  9. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    duckboy...you're welcome (thought I lost you there).

    Here's something to play with; used JS to do the color box & a few other things. You could expand this to whatever you want - changing BG color on the sample div, e.g. Think I got the ol' cube right, been awhile...


    <html>
    <head>
    <title>ChangeText</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">

    #changeText {
    font: 200 22px "times new roman";
    color: #0066ff;
    background: ivory;
    }

    input, select {
    font: 200 12px "comic sans ms",sans-serif;
    color: darkred;
    background: pink;
    }

    body {
    background: black;
    }

    </style>
    <script type="text/javascript" language="JavaScript" src="colorgrid.js"></script>
    <script type="text/javascript" language="JavaScript">

    function changeFont(fontfamily){
    if (!fontfamily) return;
    document.getElementById("changeText").style.fontFamily = fontfamily;
    document.submitForm.Font.value = fontfamily;
    }
    function changeSize(fontsize){
    if (!fontsize) return;
    document.getElementById("changeText").style.fontSize = fontsize;
    document.submitForm.Size.value = fontsize;
    }
    function changeColor(color) {
    document.getElementById("changeText").style.color = color;
    document.submitForm.Color.value = color;
    document.submitForm.showcolor.value = ' ' + color;
    }

    </script>
    </head>
    <body>
    <div align="center">
    <div style="width:100%;font-size:1px;border-top:2px ivory solid;"></div>
    <div id="changeText">I hate Monkeys</div>
    <div style="width:100%;font-size:1px;border-bottom:2px ivory solid;"></div>
    <br>
    <form name="submitForm" action="textChange.php" method="post">

    <select name="Font" onchange="changeFont(options[selectedIndex].value)">
    <option selected="selected">Choose a font</option>
    <option value="TimesNewRoman">Times New Roman</option>
    <option value="Arial">Arial</option>
    <option value="Courier">Courier</option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    </select>
    <select name="Size" onchange="changeSize(options[selectedIndex].value)">
    <option selected="selected">Choose a font size</option>
    <option value="12px">12px</option>
    <option value="14px">14px</option>
    <option value="16px">16px</option>
    <option value="18px">18px</option>
    <option value="20px">20px</option>
    <option value="22px">22px</option>
    <option value="24px">24px</option>
    <option value="26px">26px</option>
    <option value="28px">28px</option>
    <option value="30px">30px</option>
    <option value="32px">32px</option>
    <option value="34px">34px</option>
    <option value="36px">36px</option>
    <option value="38px">38px</option>
    <option value="40px">40px</option>
    <option value="50px">50px</option>
    <option value="60px">60px</option>
    <option value="70px">70px</option>
    <option value="80px">80px</option>
    </select>
    <input name="showcolor" type="text" size="8" readonly="readonly">
    <input name="Font" type="hidden">
    <input name="Size" type="hidden">
    <input name="Color" type="hidden">
    <input type="submit" value="NEXT">
    </form>

    <script type="text/javascript" language="JavaScript">

    document.write('<table cellpadding="0" cellspacing="0" border="1" bordercolor="ivory">');
    for (var c = 0,row=1; row<=12; ++row) {
    document.write('<tr>');
    for (var cell=1; cell<=18; ++cell) {
    document.write('<td style="width:20px;height:20px;background:' + colorgrid[c++] + ';" onclick="changeColor(this.style.background)"></td>');
    }
    document.write('</tr>');
    }
    document.write('</table>');

    </script>
    <span style="font:200 10px 'comic sans ms';color:ivory;">click grid for desired text color</span>
    </div>
    </body>
    </html>

    [file: colorgrid.js]

    var colorgrid = new Array(
    '#000000','#003300','#006600','#009900','#00cc00','#00ff00','#330000','#333300','#336600',
    '#339900','#33cc00','#33ff00','#660000','#663300','#666600','#669900','#66cc00','#66ff00',
    '#000033','#003333','#006633','#009933','#00cc33','#00ff33','#330033','#333333','#336633',
    '#339933','#33cc33','#33ff33','#660033','#663333','#666633','#669933','#66cc33','#66ff33',
    '#000066','#003366','#006666','#009966','#00cc66','#00ff66','#330066','#333366','#336666',
    '#339966','#33cc66','#33ff66','#660066','#663366','#666666','#669966','#66cc66','#66ff66',
    '#000099','#003399','#006699','#009999','#00cc99','#00ff99','#330099','#333399','#336699',
    '#339999','#33cc99','#33ff99','#660099','#663399','#666699','#669999','#66cc99','#66ff99',
    '#0000cc','#0033cc','#0066cc','#0099cc','#00cccc','#00ffcc','#3300cc','#3333cc','#3366cc',
    '#3399cc','#33cccc','#33ffcc','#6600cc','#6633cc','#6666cc','#6699cc','#66cccc','#66ffcc',
    '#0000ff','#0033ff','#0066ff','#0099ff','#00ccff','#00ffff','#3300ff','#3333ff','#3366ff',
    '#3399ff','#33ccff','#33ffff','#6600ff','#6633ff','#6666ff','#6699ff','#66ccff','#66ffff',
    '#990000','#993300','#996600','#999900','#99cc00','#99ff00','#cc0000','#cc3300','#cc6600',
    '#cc9900','#cccc00','#ccff00','#ff0000','#ff3300','#ff6600','#ff9900','#ffcc00','#ffff00',
    '#990033','#993333','#996633','#999933','#99cc33','#99ff33','#cc0033','#cc3333','#cc6633',
    '#cc9933','#cccc33','#ccff33','#ff0033','#ff3333','#ff6633','#ff9933','#ffcc33','#ffff33',
    '#990066','#993366','#996666','#999966','#99cc66','#99ff66','#cc0066','#cc3366','#cc6666',
    '#cc9966','#cccc66','#ccff66','#ff0066','#ff3366','#ff6666','#ff9966','#ffcc66','#ffff66',
    '#990099','#993399','#996699','#999999','#99cc99','#99ff99','#cc0099','#cc3399','#cc6699',
    '#cc9999','#cccc99','#ccff99','#ff0099','#ff3399','#ff6699','#ff9999','#ffcc99','#ffff99',
    '#9900cc','#9933cc','#9966cc','#9999cc','#99cccc','#99ffcc','#cc00cc','#cc33cc','#cc66cc',
    '#cc99cc','#cccccc','#ccffcc','#ff00cc','#ff33cc','#ff66cc','#ff99cc','#ffcccc','#ffffcc',
    '#9900ff','#9933ff','#9966ff','#9999ff','#99ccff','#99ffff','#cc00ff','#cc33ff','#cc66ff',
    '#cc99ff','#ccccff','#ccffff','#ff00ff','#ff33ff','#ff66ff','#ff99ff','#ffccff','#ffffff'
    );


    The body script is just a nested loop to output rows & columns. Prevents carpal tunnel syndrome.
    Last edited by adios; December 11th, 2002 at 10:33 PM.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    hawaii
    Posts
    4
    Rep Power
    0
    Wow, thank you adios for writing all that up! That'll definitely give me something to play with! I really appreciate it since I am a rook, and how I learn best is seeing how other people do things, then I get an idea of how its done. I'm going to have to get my wife to bake you cookies!

    This forum is awesome, I posted my original question in about 3 other forums amd never even got a repsonse!

    I'll probably be back again soon.

    duckboy

IMN logo majestic logo threadwatch logo seochat tools logo