I have a html page with some links. When you click on a link, some jQuery code hides the div container, and shows another div. The originals links, in the first div, are no longer visible.
From the browser (webkit on android) point of view, everything works perfectly.
But if I touch the screen, the hidden links react as if they were visible. If I touch the screen, where the hidden links would be, I see an orange rectangle. The browser does nothing it is only showing the link as clicked.
How is it possible to synchronize touch screen and jquery hide/show functions?
My test is on webkit, android, and sony ericson xperia phone.
I've realised a test page with the phenomen. See it here or with this qr code:
When you touch the link, you go to a div without any links, but, on my phone, if I touch the first line I see an effect on the non visible link.
Here is the html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test for Stackoverflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#with-link a").click(function()
{
$("#with-link").hide("slow");
$("#after-touch").show("slow");
return false;
});
});
</script>
</head>
<body>
<div id="with-link">
Oh... <a href="http://stackoverflow.com">It's a link !</a>
</div>
<div id="after-touch"style="display:none">
But it's not go to stackoverflow :-)<br>
To Touch Or Not To Touch that is the question.
</div>
</body>
</html>