mtab
asked on
How to create iPad-friendly navigation buttons; 2-tap issue on iPad nav buttons
Hi everyone,
I have been working on creating some touch-friendly navigation buttons; I have used <a> and <div> tags in creating the navigation buttons:
e.g.
<a href="link goes here"><div style=">Home Page</div></a>
div#button has the following CSS styles:
div#button{
width: 150px;
padding: 5px;
background: lightblue;
}
I have also added some "hover" effects on the button:
a:hover div#button{
background: #999;"
}
I have checked the page in iPad's browser and found out that the hover effect is being rendered correctly however I've noticed that I need to tap the button twice (2x) before the page is being redirected to the link - which is not what I want. I want it to work like a normal button wherein 1 tap (touch), and it will redirect to the link.
Is there any way on achieving this? If there is, how do I achieve it? It would be of a very big help if I can give some sample codes to do it or idea on how to correctly create mobile-friendly button navigation.
Also, if I use the <button> tag, will I be able to achieve this? I'm thinking of using <button> instead of the <a> and <div> tags however I do not know how should the button redirect the page.
Thanks for any help
Code of the test page I have created:
I have been working on creating some touch-friendly navigation buttons; I have used <a> and <div> tags in creating the navigation buttons:
e.g.
<a href="link goes here"><div style=">Home Page</div></a>
div#button has the following CSS styles:
div#button{
width: 150px;
padding: 5px;
background: lightblue;
}
I have also added some "hover" effects on the button:
a:hover div#button{
background: #999;"
}
I have checked the page in iPad's browser and found out that the hover effect is being rendered correctly however I've noticed that I need to tap the button twice (2x) before the page is being redirected to the link - which is not what I want. I want it to work like a normal button wherein 1 tap (touch), and it will redirect to the link.
Is there any way on achieving this? If there is, how do I achieve it? It would be of a very big help if I can give some sample codes to do it or idea on how to correctly create mobile-friendly button navigation.
Also, if I use the <button> tag, will I be able to achieve this? I'm thinking of using <button> instead of the <a> and <div> tags however I do not know how should the button redirect the page.
Thanks for any help
Code of the test page I have created:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a:hover div#button{
background: #999;"
}
div#button{
width: 150px;
padding: 5px;
background: lightblue;
}
</style>
</head>
<body>
<a href="http://www.google.com"><div id="button">Google Page</div></a>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER