SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Sep 30, 2006, 15:10 #1
- 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(theRow, action, default_color, hover_color, click_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 c = null;
for (c = 0; c < rowCellsCnt; c++)
{
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>
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.
-
Sep 30, 2006, 15:39 #2
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>
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
-
Sep 30, 2006, 15:46 #3
- 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($key1, 80) . "</td>";
}
echo "</tr>";
}
echo "</table>";
-
Sep 30, 2006, 15:55 #4
Perhaps you could, but why? You'll still need to name them in order to pass to php script.
Saul
-
Sep 30, 2006, 15:56 #5
- Join Date
- Sep 2006
- Posts
- 23
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by php_daemon
again edited..
question for youi`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..??
-
Sep 30, 2006, 16:00 #6
What's going wrong?
Edit:
I doubt I can join you, but I sure can listen to your ideas.
Saul
-
Sep 30, 2006, 16:06 #7
- 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