By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,477 Members | 1,632 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,477 IT Pros & Developers. It's quick & easy.

Color remains the same after onClick

P: 93
Hi

Can anyone help me..
How can I make onClick color remains the same =red?
Currently if it is mouseover it change to red, onmouseover it change to original background color. I need it to remain red once it is click so that I know where is the last location I click on the bar


[PHP]

<td width="<?php echo ($cellwidth); ?>" height="17" bgcolor="yellow" onMouseOver="this.style.background ='red'"
onMouseOut="this.style.background='yellow'" onClick="window.frames.eventsDisplay.location = 'MB2eventlistTimeline.php?movieID=<?php echo $movie->movieID;?>&events=<?php echo $timeline->eventCategory;?>#<?php echo $timeline->eventID?>';parent.notesForm.eventID.value=<?php echo $timeline->eventID?>;parent.resetNotes();" style="cursor: pointer;"></td>

[/PHP]

Stuck..

nma
Sep 12 '08 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
You can set a variable onclick which you can test onmouseover.
Sep 12 '08 #2

iam_clint
Expert 100+
P: 1,208
You could use a custom attribute to know which are selected..


Toggle color on/off with mouseover and mouseout events included.. Example provided
Expand|Select|Wrap|Line Numbers
  1. <table>
  2. <tr>
  3.     <td 
  4.       onmouseover="if (this.getAttribute('selected')==null) { this.setAttribute('selected', ''); } if (this.getAttribute('selected')=='') { this.style.color = '#ff0000'; }"
  5.       onmouseout="if (this.getAttribute('selected')=='') { this.style.color = ''; }"
  6.       onclick="if (this.getAttribute('selected')!='') { this.setAttribute('selected', ''); this.style.color=''; } else { this.setAttribute('selected', 'true'); this.style.color='#ff0000'; }"
  7.       style="cursor: pointer;">
  8.     Blah
  9.     </td>
  10. </tr>
  11. </table>
  12.  
I made this sample with font color rather than background color... you can change it.
Sep 12 '08 #3

P: 93
nma
You could use a custom attribute to know which are selected..


Toggle color on/off with mouseover and mouseout events included.. Example provided
Expand|Select|Wrap|Line Numbers
  1. <table>
  2. <tr>
  3.     <td 
  4.       onmouseover="if (this.getAttribute('selected')==null) { this.setAttribute('selected', ''); } if (this.getAttribute('selected')=='') { this.style.color = '#ff0000'; }"
  5.       onmouseout="if (this.getAttribute('selected')=='') { this.style.color = ''; }"
  6.       onclick="if (this.getAttribute('selected')!='') { this.setAttribute('selected', ''); this.style.color=''; } else { this.setAttribute('selected', 'true'); this.style.color='#ff0000'; }"
  7.       style="cursor: pointer;">
  8.     Blah
  9.     </td>
  10. </tr>
  11. </table>
  12.  
I made this sample with font color rather than background color... you can change it.
Hi iam_clint
I'm correcting the codes like below..there is red color on the cell once I mouseout but it remains many red color appear depending on as many times I click on the cell.
What is wrong with the code?
Thanks

[PHP]
<td width="<?php echo ($cellwidth); ?>" height="17" bgcolor="#00ff00" onmouseover="if (this.getAttribute('selected')==null) { this.setAttribute('selected', ''); } if (this.getAttribute('selected')=='') { this.style.background = '#ff0000'; }" onmouseout="if (this.getAttribute('selected')=='') { this.style.background = ''; }" onclick="if (this.getAttribute('selected')!='') { this.setAttribute('selected', ''); this.style.background=''; } else { this.setAttribute('selected', 'true'); this.style.background='#ff0000'; } "window.frames.eventsDisplay.location = 'MB2eventlistTimeline.php?movieID=<?php echo $movie->movieID;?>&events=<?php echo $timeline->eventCategory;?>#<?php echo $timeline->eventID?>'; parent.notesForm.eventID.value=<?php echo $timeline->eventID?>;parent.resetNotes(); " style="cursor: pointer;"></td>
[/PHP]
Sep 15 '08 #4

iam_clint
Expert 100+
P: 1,208
I don't fully understand your english... are you trying to make it so only 1 cell can be selected at a time?
Sep 15 '08 #5

P: 93
nma
I don't fully understand your english... are you trying to make it so only 1 cell can be selected at a time?
Sorry for my poor explaination..
Yes I want it only at one time cell selected (say red color)..then when user click at another cell that current cell will be selected and the previous cell back to original color

It is actually a timeline bar...

p/s the code you give is correct in terms of highlighted number of click user made on the timeline show red colored cell appear along the timeline/cells

Please help..
Sep 15 '08 #6

iam_clint
Expert 100+
P: 1,208
so you need to make a function for onclick.. in this function you iterate through all cells..

Example
Expand|Select|Wrap|Line Numbers
  1. function resetHighlight() {
  2.     var ex=document.getElementById("tablebody").getElementsByTagName("TD"); 
  3.     for (var i=0; i<ex.length; i++) {
  4.         if (ex[i].getAttribute("selected")!="") {
  5.             ex[i].style.background="";
  6.             ex[i].setAttribute("selected", "");
  7.         }
  8.     }
  9. }
  10.  
  11. function highlight(obj) {
  12.     resetHighlight();
  13.     obj.setAttribute("selected", "true");
  14.     obj.style.background="#FF0000";
  15. }
  16.  
Sep 15 '08 #7

P: 93
nma
so you need to make a function for onclick.. in this function you iterate through all cells..

Example
Expand|Select|Wrap|Line Numbers
  1. function resetHighlight() {
  2.     var ex=document.getElementById("tablebody").getElementsByTagName("TD"); 
  3.     for (var i=0; i<ex.length; i++) {
  4.         if (ex[i].getAttribute("selected")!="") {
  5.             ex[i].style.background="";
  6.             ex[i].setAttribute("selected", "");
  7.         }
  8.     }
  9. }
  10.  
  11. function highlight(obj) {
  12.     resetHighlight();
  13.     obj.setAttribute("selected", "true");
  14.     obj.style.background="#FF0000";
  15. }
  16.  
Hi iam_clint,
But how am I going to insert in my original coding..does this function need to be declare somewhere in the beginning of my codes.
At the moment in my original codes when onClick happen it will get some event (video keyframe list). Can I combine this two event (the code you give above + the one in my original codes) within one single onClick lines of codes?


Expand|Select|Wrap|Line Numbers
  1.  
  2. ........onClick="window.frames.eventsDisplay.location = 'MB2eventlistTimeline.php?movieID=<?php echo $movie->movieID;?>&events=<?php echo $timeline->eventCategory;?>#<?php echo $timeline->eventID?>';parent.notesForm.eventID.value=<?php echo $timeline->eventID?>;parent.resetNotes();"...........
Sep 16 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Yes, it's relatively easy to combine. Move all the onclick code into its own function. I see that you're using PHP code within the onclick, so make the function generic and pass the PHP values as arguments to the function.
Sep 18 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.