SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    ********* Addict DLG_1's Avatar
    Join Date
    Jun 2000
    Location
    Texas, USA
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic background color changes using javascript

    how can this be done? css? please help!
    I'm looking for something similar to Yahoo mail how the background color changes on a row when you check their checkbox.

    thanks!

  2. #2
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    object_handle_reference.style.backgroundColor='newRGB';

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  3. #3
    ********* Addict DLG_1's Avatar
    Join Date
    Jun 2000
    Location
    Texas, USA
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not a pro, could you please provide me additional information?

    Thanks!

  4. #4
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not a telepath - can you give me a little additional information!







    I don't know what the scenario is, what the table rows are called - or how you're referencing them, what the triggers are - etc etc.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  5. #5
    ********* Addict DLG_1's Avatar
    Join Date
    Jun 2000
    Location
    Texas, USA
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HAHAHA! lol.

    okay here's my code, I figured it out. However, I'm wondering how to do the following. I've got a calendar that's dynamically generated (asp) based on user information (Month & eventually year). It will generate this calendar and on the right of it there will be boxes that can be used to assign OPEN and CLOSE times to a dept.
    there will be additional OPEN CLOSE time boxes that will be generated (dhtml) when needed.

    I need to find out how to dynamically assign colors to the background of those text boxes and apply those same colors to the <td> tags that contain the check box that was clicked.

    ya know?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    td {text-align:center}
    .test { backgroundColor: white}
    .defaultTimes{ backgroundColor:#BAC9D6 }
    th {font-family: tahoma; font-size: 12pt; color: white; font-weight: bold}
    td {font-family: arial; font-size: 8pt; color: black}
    </style>
    <script language="JavaScript">
    var selectedColor = "#bac9d6";
    var unSelectedColor = "#ffffff";
    function setColor(){
    document.all.test.style.backgroundColor = unSelectedColor;
    //document.all.defaultTimes.style.backgroundColor = "#BAC9D6";
    }
    
    function changeColor(){
    if (document.all.test.style.backgroundColor != selectedColor) {
    document.all.test.style.backgroundColor= selectedColor;
    }
    else {
    document.all.test.style.backgroundColor= "#ffffff";
    }
    }
    
    </script>
    </head>
    
    <body onload="setColor();">
    <form name="form1" method="post" action="">
    <% varMonth = Request.Form("Month") %>
    
      <table width="465" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
        <tr> 
          <th colspan="7" bgcolor="#CCCC99"> 
            <% Response.Write (varMonth) 
    	  'Response.Write(Now)
    	  Response.Write(DateValue(Now))
    	  Response.Write( WeekdayName(Day(Now)) )
    	  Response.Write( MonthName(Month(Now)) )
    	  Response.Write( GetDaysInMonth(2,2000))
    	  Public Function GetDaysInMonth(mnth, yr)
    Select Case mnth
    Case 1, 3, 5, 7, 8, 10, 12
    GetDaysInMonth = 31
    Case 4, 6, 9, 11
    GetDaysInMonth = 30
    Case 2
    If yr Mod 4 = 0 Then
        GetDaysInMonth = 29
    Else
        GetDaysInMonth = 28
    End If
    End Select
    End Function
    	  %>
          </th>
        </tr>
        <tr> 
          <td>S</td>
          <td>M</td>
          <td>T</td>
          <td>W</td>
          <td>Th</td>
          <td>F</td>
          <td>S</td>
          <td>Default Times</td>
          <td>&nbsp;</td>
        </tr>
        <tr> 
          <td id="test">1 <br> <input type="checkbox" name="checkbox" value="checkbox" onClick="changeColor();"> 
          </td>
          <td>2<br> <input type="checkbox" name="checkbox2" value="checkbox"> </td>
          <td>3<br> <input type="checkbox" name="checkbox3" value="checkbox"> </td>
          <td>4<br> <input type="checkbox" name="checkbox4" value="checkbox"> </td>
          <td>5<br> <input type="checkbox" name="checkbox5" value="checkbox"> </td>
          <td>6<br> <input type="checkbox" name="checkbox6" value="checkbox"> </td>
          <td>7<br> <input type="checkbox" name="checkbox7" value="checkbox"> </td>
          <td id="defaultTimes">Open 
            <input name="textfield" type="text" size="4" maxlength="4"></td>
          <td id="defaultTimes">Close 
            <input name="textfield2" type="text" size="4" maxlength="4"></td>
        </tr>
        <tr> 
          <td>8<br> <input type="checkbox" name="checkbox8" value="checkbox"> </td>
          <td>9<br> <input type="checkbox" name="checkbox9" value="checkbox"> </td>
          <td>10<br> <input type="checkbox" name="checkbox10" value="checkbox"> </td>
          <td>11<br> <input type="checkbox" name="checkbox11" value="checkbox"> </td>
          <td>12<br> <input type="checkbox" name="checkbox12" value="checkbox"> </td>
          <td>13<br> <input type="checkbox" name="checkbox13" value="checkbox"> </td>
          <td>14<br> <input type="checkbox" name="checkbox14" value="checkbox"> </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr> 
          <td>15<br> <input type="checkbox" name="checkbox15" value="checkbox"> </td>
          <td>16<br> <input type="checkbox" name="checkbox16" value="checkbox"> </td>
          <td>17<br> <input type="checkbox" name="checkbox17" value="checkbox"> </td>
          <td>18<br> <input type="checkbox" name="checkbox18" value="checkbox"> </td>
          <td>19<br> <input type="checkbox" name="checkbox19" value="checkbox"> </td>
          <td>20 <br> <input type="checkbox" name="checkbox20" value="checkbox"></td>
          <td>21<br> <input type="checkbox" name="checkbox21" value="checkbox"> </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr> 
          <td>22<br> <input type="checkbox" name="checkbox22" value="checkbox"> </td>
          <td>23<br> <input type="checkbox" name="checkbox23" value="checkbox"> </td>
          <td>24<br> <input type="checkbox" name="checkbox24" value="checkbox"> </td>
          <td>25<br> <input type="checkbox" name="checkbox25" value="checkbox"> </td>
          <td>26<br> <input type="checkbox" name="checkbox26" value="checkbox"> </td>
          <td>27<br> <input type="checkbox" name="checkbox27" value="checkbox"> </td>
          <td>28<br> <input type="checkbox" name="checkbox28" value="checkbox"> </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr> 
          <td>29<br> <input type="checkbox" name="checkbox29" value="checkbox"> </td>
          <td>30<br> <input type="checkbox" name="checkbox30" value="checkbox"> </td>
          <td>31<br> <input type="checkbox" name="checkbox31" value="checkbox"> </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <p>&nbsp;</p>
    </form>
    <p>&nbsp;</p>
    </body>
    </html>

  6. #6
    ********* Addict DLG_1's Avatar
    Join Date
    Jun 2000
    Location
    Texas, USA
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay i've figured out several things now.

    I need to dynamically create "<ID>" style tags.

    for instance:

    date1
    date2
    date3
    etc.

    based on the total # of days for the month. then I need to reference these. can someone help?

    the following code illustrates what I need to do; however, I haven't accomplished this yet. can someone help!!!
    Code:
    function changeColor( i ){
    //alert(document.all.test.style.backgroundColor)
    if (document.all.test+i.style.backgroundColor != selectedColor) {
    document.all.test+i.style.backgroundColor= selectedColor;
    }
    else {
    document.all.test+i.style.backgroundColor= "#ffffff";
    }
    }

  7. #7
    ********* Addict DLG_1's Avatar
    Join Date
    Jun 2000
    Location
    Texas, USA
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got it!!! all by myself.

    Code:
    function changeColor(i){
    //alert(document.all.test.style.backgroundColor)
    if (document.all.test[i].style.backgroundColor != selectedColor) {
    document.all.test[i].style.backgroundColor= selectedColor;
    }
    else {
    document.all.test[i].style.backgroundColor= "#ffffff";
    }
    }
    
    :
    :
    :
    <td id="test">....</td>
    <td id="test">....</td>


Bookmarks

Posting Permissions

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