iphone onclick shading

[Marcus Wu]

I am working on a game using the canvas tag.  I had been planning on using onclicks to capture events for use in the game.  It works, but not the way I had planned.  The iPhone's Safari browser shades the clicked item during the click and unshades it after the click.  It's useful functionality most of the time so the user knows what control they clicked on the page, but for my case, it is just annoying.  The entire canvas tag gets shaded and then unshaded causing a flickering effect in the game.

Does anyone know of a way to turn that off or to avoid it entirely?

I tried adding onclick events to the entire window/document, but that does not seem to work at all.
Any help/hints would be greatly appreciated.

Thanks,
Marcus Wu

[Randy Walker]

I’ve never heard any mention anywhere of that being controllable.  It’s been told to me by apple guys that it’s a built in way to let people know their taps have been registered.  They obviously didn’t have game UI in mind when telling people Safari was the sdk.  Feb is coming...
-=R

[wayne]

To disable tap highlight for an element add to its style
the following CSS tag:

-webkit-tap-highlight-color:rgba(0,0,0,0);

[anmldr]

This is to ask another similar question.

I have a link in each cell of a table. I would like to highlight the
whole cell rather than just the link.

Is there another webkit call that would do this?

Thank you,
Linda

[AwayBBL]

Linda, You could probably do that with an onclick. When someone
clicks, change the bgcolor of the cell.

pseudo code...

function chColor(tdName) {
document.getElementById(tdName).style.backgroundColor ="white";
}


<table><tr>
<td id="td_1" onclick="chColor('td_1')" >Stuff in the cell</td>
</tr></table>

> > -webkit-tap-highlight-color:rgba(0,0,0,0);- Hide quoted text -
>
> - Show quoted text -

[RobG]

On Dec 2, 6:39 am, AwayBBL <away...@gmail.com> wrote:
> Linda, You could probably do that with an onclick. When someone
> clicks, change the bgcolor of the cell.
>
> pseudo code...
>
> function chColor(tdName) {
> document.getElementById(tdName).style.backgroundColor ="white";

If you pass a reference to the td from the calling handler, your
function becomes:

function chColor(el) {
el.style.backgroundColor = 'white';
}

which is much more efficient than hard-coding the ID value. Since a
td element can have both a name and an ID, I wouldn't use a variable
that expects to get an ID "tdName".

>
> }
>
> <table><tr>
> <td id="td_1" onclick="chColor('td_1')" >Stuff in the cell</td>

And the handler:

<td onclick="chColor(this);" ...


Another method is to add or remove a class name, that way you can
control display properties independently of your code.


--
Rob