Color remains the same after onClick

[nma]

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

[acoder]

You can set a variable onclick which you can test onmouseover.

[iam_clint]

You could use a custom attribute to know which are selected..


Toggle color on/off with mouseover and mouseout events included.. Example provided

<table>
<tr>
    <td 
      onmouseover="if (this.getAttribute('selected')==null) { this.setAttribute('selected', ''); } if (this.getAttribute('selected')=='') { this.style.color = '#ff0000'; }"
      onmouseout="if (this.getAttribute('selected')=='') { this.style.color = ''; }"
      onclick="if (this.getAttribute('selected')!='') { this.setAttribute('selected', ''); this.style.color=''; } else { this.setAttribute('selected', 'true'); this.style.color='#ff0000'; }"
      style="cursor: pointer;">
    Blah
    </td>
</tr>
</table>
 

I made this sample with font color rather than background color... you can change it.

[nma]

You could use a custom attribute to know which are selected..


Toggle color on/off with mouseover and mouseout events included.. Example provided

<table>
<tr>
    <td 
      onmouseover="if (this.getAttribute('selected')==null) { this.setAttribute('selected', ''); } if (this.getAttribute('selected')=='') { this.style.color = '#ff0000'; }"
      onmouseout="if (this.getAttribute('selected')=='') { this.style.color = ''; }"
      onclick="if (this.getAttribute('selected')!='') { this.setAttribute('selected', ''); this.style.color=''; } else { this.setAttribute('selected', 'true'); this.style.color='#ff0000'; }"
      style="cursor: pointer;">
    Blah
    </td>
</tr>
</table>
 

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]

[iam_clint]

I don't fully understand your english... are you trying to make it so only 1 cell can be selected at a time?

[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..

[iam_clint]

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

Example

function resetHighlight() {
    var ex=document.getElementById("tablebody").getElementsByTagName("TD"); 
    for (var i=0; i<ex.length; i++) {
        if (ex[i].getAttribute("selected")!="") {
            ex[i].style.background="";
            ex[i].setAttribute("selected", "");
        }
    }
}
 
function highlight(obj) {
    resetHighlight();
    obj.setAttribute("selected", "true");
    obj.style.background="#FF0000";
}
 

[nma]

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

Example

function resetHighlight() {
    var ex=document.getElementById("tablebody").getElementsByTagName("TD"); 
    for (var i=0; i<ex.length; i++) {
        if (ex[i].getAttribute("selected")!="") {
            ex[i].style.background="";
            ex[i].setAttribute("selected", "");
        }
    }
}
 
function highlight(obj) {
    resetHighlight();
    obj.setAttribute("selected", "true");
    obj.style.background="#FF0000";
}
 

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?

 
........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();"...........

[acoder]

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.