34

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?

ColinE
  • 68,894
  • 15
  • 164
  • 232
  • Don't know how to disable this but you could set a timer in Javascript and update the DOM after 0.5s :) (I am assuming you're trying to tweak your own website) – Praetorian Jun 16 '11 at 20:33
  • No - I am seeing whether I can build complex HTML / JS apps. So, no, that is not an option. Thanks anyhow! – ColinE Jun 16 '11 at 20:46
  • I meant it more as a joke than a serious suggestion anyway :) BTW, I like your Metro in Motion series of posts. – Praetorian Jun 16 '11 at 20:57
  • I'm guessing you can just remove the focus from the link after you hide the link visibility? – RajenK Jun 17 '11 at 17:29
  • Would it have something to do with PixelShader Class? http://msdn.microsoft.com/en-us/library/system.windows.media.effects.pixelshader%28v=vs.95%29.aspx – Rhys Sep 07 '11 at 22:57
  • Did you ever find a solution? I'm struggling with the same problem, augmented by the fact that IE thinks I clicked the parent div and displays a rectangle the size of said parent div :/ – efdee Sep 27 '11 at 18:10
  • 2
    No solution yet :-( I asked this same question on thw WP7 developer blog here: http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/09/22/ie9-mobile-developer-overview.aspx#comments – ColinE Sep 27 '11 at 20:25
  • Have you tried using jQM's vclick event? – purplecabbage May 30 '12 at 21:13

4 Answers4

19

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

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

It should work.

Werner Henze
  • 16,404
  • 12
  • 44
  • 69
Pravesh Pesswani
  • 481
  • 8
  • 16
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.

Jerome
  • 1,162
  • 1
  • 6
  • 12
1

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

sandeep kumar
  • 66
  • 4
  • 1
    Works great in general but on popovers "live" causes click events beeing called in the back of the popover. Mechanisms to stop propagation are not working together with JQuery "live" command. See additional note of http://api.jquery.com/event.stopPropagation/ – Michael Biermann Nov 15 '12 at 16:50
-1

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 ;)

norbert
  • 525
  • 2
  • 6
  • 16