I have an html page with some links. When you click on the link, some jQuery code hides the div container and shows another div. Original links in the first div are no longer visible.
From a browser point of view (webkit on android) everything works fine.
But if I touch the screen, hidden links react as if they were visible. If I touch the screen where the hidden links will be, I see an orange rectangle. The browser does nothing, it shows only the link by clicking.
How can I sync the touch screen and jquery hide / show functions?
My test is on the webcam, android and sony ericson xperia phone.
I understood the test page with the phenomenon. See here here or with this code qr:
When you touch the link, you go to the div without any links, but, on my phone, if I touch the first line, I see the effect on the invisible 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 a link !</a>
</div>
<div id="after-touch"style="display:none">
But it not go to stackoverflow :-)<br>
To Touch Or Not To Touch that is the question.
</div>
</body>
</html>
source
share