Link to home
Start Free TrialLog in
Avatar of mtab
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:
<!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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Abhijeet Rananaware
Abhijeet Rananaware
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mtab
mtab

ASKER

Idea was just given on how to create a mobile site using jQuery mobile