Hi all. The project I'm currently working on decided to use only HTML5 and CSS for the layout of the mobile app. I have tried creating sample but when I load the app into the phone, I cannot scroll from tab to tab.
The index.html
<!DOCTYPE html>
<html>
<head>
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/javascript" src="js/javascript.js"/></script>
<title>My Homepage</title>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="index.html" class="active" id="tab_1" onclick="tabSwitch(1, 4, 'tab_');" x-blackberry-focusable="true">Home</a></li>
<li><a href="forums.html" id="tab_2" onclick="tabSwitch(2, 4, 'tab_');" x-blackberry-focusable="true">Forums</a></li>
<li><a href="tutorials.html" id="tab_3" onclick="tabSwitch(3, 4, 'tab_');" x-blackberry-focusable="true">Tutorials</a></li>
<li><a href="downloads.html" id="tab_4" onclick="tabSwitch(4, 4, 'tab_');" x-blackberry-focusable="true">Downloads</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div id="content">Your main content goes here</div>
</body>
</html>
The CSS code: layout.css
#tabs
{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
font-weight: bold;
}
#tabs ul
{
list-style: none;
margin: 0;
padding: 0;
}
#tabs ul li
{
display: inline;
margin: 0;
text-transform: capitalize;
}
#tabs ul li a
{
padding: 5px 16px;
color: #fff;
background: #e7a272;
float: left;
text-decoration: none;
margin: 0 5px 0 0;
text-transform: capitalize;
}
#tabs ul li a:hover
{
background: #ccff66;
color: #7f9298;
text-decoration: none;
}
#tabs ul li a.active
{
background: #eaeaea;
color: #7f9298;
}
#content
{
background: #eaeaea;
clear: both;
font-size: 11px;
color: #000;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
} The javascript code to switch tabs, javascript.js
function tabSwitch(active, number, tab_prefix)
{
for(var i = 1; i < number+1; i++)
{
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(tab_prefix+active).className = 'active';
} I have "<rim:navigation mode="focus" />" in the config.xml and I have tried adding "x-blackberry-focusable="true" to the links but it's not working. I cannot scroll from tab to tab. Any advice/help would be greatly appreciated.
Thank you.
