SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background color problems together with onclick.. (i almost have it)

    Hey,

    i`ve made a little script that allows you to hover over a table and the background color will change.. than when you move out it will change back to default.. that`s all fine.. the clicking part is the part that gives me the most pain.. at this moment you can click on it and the background color gets orange (like i want it) but now the problem is that i want 2 other things in it and i can`t get them working :S

    you see a checkbox on the left.. i want to make it so that when the checkbox is checked the entire row gets orange.. when the chechbox is unchecked the entire row must be default again.. but i`m not getting that working.. also the checkbox must turn on/off when you click anywhere in that row.. not just on the checkbox itself.. any help would be verry nice

    here is the script:
    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript">
      function 
    set_color(theRowactiondefault_colorhover_colorclick_color)
      {
        
    //document.write("jhjhgjhgj");
        
    theCells theRow.getElementsByTagName('td');
        if (
    action == 'over')
        {
            
    newColor hover_color;
        }
        if (
    action == 'out')
        {
            
    newColor default_color;
        }
        if (
    action == 'click')
        {
            
    newColor click_color;
        }
        
        var 
    rowCellsCnt  theCells.length;
        var 
    null;
        for (
    0rowCellsCntc++)
        {
            
    theCells[c].setAttribute('bgcolor'newColor);
        }
        

      }

    </script>

    </head>
    <body>
    <table>
      <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="this.onmouseout = function() {set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');};" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" onmousedown="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');">
        <td><input type="checkbox"></td>
        <td>abcdef</td>
        <td>fedcba</td>
      </tr>
      <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="this.onmouseout = function() {set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');};" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" onmousedown="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');">
        <td><input type="checkbox"></td>
        <td>abcdef</td>
        <td>fedcba</td>
      </tr>
    </table>
    </body>
    </html> 
    BTW.. this is my first javascript coding ever you can really get far with the javascript development information on mozilla

    and to give another example how i want it.. i want it to behaive EXACTLY the same like phpmyadmin does when you want to select multiple columns.

    Thanx alot.

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here you go:
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
      function set_color(theRow, action, default_color, hover_color, click_color)
      {
        var chk=document.getElementsByName('chk');
        if (action == 'over')
        {
            newColor = hover_color;
        }
        if (action == 'out')
        {
            if(!chk[theRow.rowIndex].checked)newColor = default_color;
            else newColor = click_color;
        }
        if (action == 'click')
        {
            if(chk[theRow.rowIndex].checked){
    		  chk[theRow.rowIndex].checked=false;
    		  newColor = default_color;
    		}else{
    		  chk[theRow.rowIndex].checked=true;
    		  newColor = click_color;
    		}
            
        }
        
        theRow.style.background=newColor;
        
    
      }
    
    </script>
    
    </head>
    <body>
    <table>
      <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" >
        <td><input name="chk" type="checkbox"></td>
        <td>abcdef</td>
        <td>fedcba</td>
      </tr>
      <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" >
        <td><input name="chk" type="checkbox"></td>
        <td>abcdef</td>
        <td>fedcba</td>
      </tr>
    </table>
    </body>
    </html> 
    I've simplified it a bit also.

    Also I'd suggest to remove the colors from function parameters and rather define the colors in css or js. That would save you from redundant code.
    Saul

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx alot for the fast reply
    for the colors.. this was all just for testing purpose.. the end result will be done with styles

    and i request.. i see you gave some names to the checkboxes.. i wonder if it`s possible to do it without names or id`s.. because i want to loop those rows in php and i`m not sure if javascript is gonna take that..

    edit:://
    tested it in the loop and that really screws it up :P could be because of the php code ofcause :P

    here is that code:
    and i`m just testing it.. the code will get cleaner and better in time!!
    PHP Code:
                foreach ($test as $value1 => $value2)
                {
                    echo 
    "<tr onmouseover=\"set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');\" onclick=\"set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');\" onmouseout=\"set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');\">";
                    
    //echo "<tr class=\"list_normal\">";
                    
                    
                    //echo "<td><input type=\"checkbox\" class=\"chk\" name=\"chkbox1\" value=\"1\" onclick=\"selectRow(this);\" /></td>";
                    
    echo "<td><input type=\"checkbox\" name=\"chk\" value=\"1\"></td>";
                    foreach (
    $value2 as $key0 => $key1)
                    {
                        echo 
    "<td>" str_end($key180) . "</td>";
                    }
                    
                    echo 
    "</tr>";
                }
                echo 
    "</table>"

  4. #4
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Perhaps you could, but why? You'll still need to name them in order to pass to php script.
    Saul

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by php_daemon
    Perhaps you could, but why? You'll still need to name them in order to pass to php script.
    read my edit please :P

    again edited..
    question for you i`m currently making a phpmyadmin alternative.. i have all the php knowledge to make it but not all the javascript knowledge.. and you seem to know alot about it.. would you like to join me in making that script? it`s called LightAdmin but the name can still be changed.. for now it`s just all kinds of test things put together..

    could you let me know if you want to join? or want to hear all the idea`s i have with the script..??

  6. #6
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What's going wrong?

    Edit:


    I doubt I can join you, but I sure can listen to your ideas.
    Saul

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well.. when i`m checking the first row the second gets the check and the first row gets the color :P strange huh.. but it could be a error in the php coding!! i didn`t really checked it yet..

    and for your edit.. how do you do that?? :S
    and can you add me to msn? my msn is markg852 at hotmail dot com and i`m online now.

    Edit:

    those [ e d i t ] tags are new for me... are those things modded in here or in vbulletin by default? since there is no indication of it in the advanced reply window....


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
  •