Windows Phone 7 Browser - Turn off the gray shadin

Question

With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.

This looks pretty horrible!

Does anyone know how to disable this effect?

Answer 1

Add a meta tag in you head section in you html file.

<meta name="msapplication-tap-highlight" content="no" /> 

It should work.

Answer 2

The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.

<div id="myLink" style="float:left">
   <img src="images/myLinkIcon.png" style="position:absolute" />
   <span style="position:absolute;left:50px">Click here</span>
</div>

<script>
    // jQuery
    $(function () {
        $("#myLink").click(function () {
            console.log("clicked on myLink");
        });
    });
</script>

The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.

Answer 3

The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.

I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant You are looking for: 1. gray area on tap

We're also handling problem with low responsivenes time. Check it out ;)

Answer 4

This works try using jquery

$(id|classname|document).live('click',function(){
   //write code that needs to executed in this area
});

I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg

<div id="d1"><div id="d2"></div></div>

you can this for inner div like this

$('#d2").live('click',function(){changecolor();changebackground();});

enjoy coding........jquery