Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
Accepted Solution

Problem Scrolling on Tabbed Navigation

[ Edited ]

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.

 

Retired
erikjohnzon
Posts: 245
Registered: ‎09-21-2012
My Device: Q10

Re: Problem Scrolling on Tabbed Navigation

Hi Iruka,

 

Where is your active class? You have a call to:

 

document.getElementById(tab_prefix+active).className = 'active';  

 

But I don't see this class defined in your CSS? This is probably a good place to start. You should also be able to pull this code into a browser and use Chrome web inspector to step through it to ensure it works properly.

 

Hope that helps!

@erikjohnzon
erjohnson@blackberry.com
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800

Re: Problem Scrolling on Tabbed Navigation

Hi erikjohnzon, This is the active class: #tabs ul li a.active { background: #eaeaea; color: #7f9298; } I have tried testing it on Ripple Emulator. It works perfectly until I package and load it into the phone then it's not working.
Retired
erikjohnzon
Posts: 245
Registered: ‎09-21-2012
My Device: Q10

Re: Problem Scrolling on Tabbed Navigation

I loaded the provided source onto a BB10 and this is the behaviour I am experiencing:

 

1. I can click on a link and set the "active" class properly to the tabs. The proper tab is then "selected".

2. I do not see any content change because of course all your tab js function is doing is changing CSS.

 

If your are expecting actual content from the different html pages you have defined, you will have to load that into your content pane. Right now all you are doing on click is setting a CSS class, which seems to work just fine for me on device. Have I mis-understood? If you would like to also navigate in your JS then set your window.location as well in the tab function to the other page.

@erikjohnzon
erjohnson@blackberry.com
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800

Re: Problem Scrolling on Tabbed Navigation

The content are empty. Right now I'm trying to create a layout using tabbed navigation and try to check if I can navigate between the tabs using trackpad.

 

It's working fine on BB10? I am testing it on (Torch 9800)BB6. Platform problems?

 

When you load it into BB10, does the black coloured background stretch all the way to the bottom of the screen?

 

Thank you.

Retired
erikjohnzon
Posts: 245
Registered: ‎09-21-2012
My Device: Q10

Re: Problem Scrolling on Tabbed Navigation

Have you defined forums.html, tutorials.html or downloads.html? You are capturing the click event, so you will not navigate to those pages with content on them. You must actually load those pages if you wish to show them.

Example:

 

<a href="tutorials.html">Tutorials</a> is a hyperlink to an html page, but if you provide an onclick you are setting this link as active, BUT if you navigate pages, this will no longer be true.

 

Here is a good arcticle on doing what you would like with Jquery, seems like a good solution for you:

 

http://www.jacklmoore.com/notes/jquery-tabs

@erikjohnzon
erjohnson@blackberry.com
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800

Re: Problem Scrolling on Tabbed Navigation

The tabs won't be retrieving html pages but to use jQuery to load the contents into the respective tabs. Will try out the jQuery version of the tab.

 

Thank you.=)