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
My Carrier: DiGi

Horizontal scrollbar and Focus Problem

Hi all. I have been stucked with this problem for days and really hope someone could help.  I am trying to create a div within another div whereby the outer div is scrollable and the inner div will contain data to be displayed in table format using CSS. 

 

This is the index page. 

<!DOCTYPE html>
<html>
<head>
  <meta name="x-blackberry-defaultHoverEffect" content="false" />
  <meta name="viewport" content="initial-scale=1.0,width=device-width,height=device-height,user-scalable=yes,target-densitydpi=device-dpi" />
  <link rel="stylesheet" type="text/css" href="css/layout.css" />
  <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="js/javascript.js" type="text/javascript"></script>
  <script src="js/action.js" type="text/javascript"></script>
  <script src="js/mainmenu.js" type="text/javascript"></script>
  </head>
<body id="mainIndex" onLoad="approverPage()">

</body>
</html>

 

The mainmenu js file: 

function approverPage()
{
  var divWidth = (screen.width - 10) + 'px';
  var strApprover = "";
  
  strApprover += approverHeader();
    
  strApprover += '<div id="content" style="width: '+divWidth+'; background-color: #cc6699;" x-blackberry-focusable="true" x-blackberry-onRight="scroll(\'content\')" x-blackberry-onLeft="scroll(\'content\')" >';
  strApprover += '<div class="tablePending">';
  strApprover += '<div class="rowDisplay">';
  strApprover += '<div class="headerPending widthPendRef">REF</div>';
  strApprover += '<div class="headerPending widthPendRequester">REQUESTER</div>';
  strApprover += '<div class="headerPending widthPendRemark">REMARK</div>';
  strApprover += '<div class="headerPending widthPendDate">DATE</div>';
  strApprover += '<div class="headerPending widthPendAmount">AMOUNT</div>';
  strApprover += '<div class="headerPending widthPendAction">ACTION</div>';
  strApprover += '</div>';
  
  strApprover += '<div class="rowDisplay">';
  strApprover += '<div class="dataPending widthPendRed" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="refUnhighlight(this)" onclick="particularPage()">RWB-2370</div>';
  strApprover += '<div class="dataPending widthPendRequester" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="refUnhighlight(this)">1111111 - Lim Mei Ling</div>';
  strApprover += '<div class="dataPending widthPendRemark" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="refUnhighlight(this)">remark</div>';
  strApprover += '<div class="dataPending widthPendDate" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="refUnhighlight(this)">02/03/2012</div>';
  strApprover += '<div class="dataPending widthPendAmount" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="refUnhighlight(this)">300.00</div>';
  strApprover += '<div class="dataPending widthPendAction" x-blackberry-focusable="true">';
  strApprover += '<select id="selectAction" class="optionCSS" x-blackberry-focusable="true" onmouseover="btnHighlight(this)" onmouseout="btnUnhighlight(this)">';
  strApprover += '<option>Pending</option><option>Approve</option><option>Reject</option>';
  strApprover += '</select>';
  strApprover += '</div>';
  strApprover += '</div>';
  strApprover += '</div></div>';
  
  $('#mainIndex').html(strApprover);
}

This is the action.js

 

function highlight(e)
{
  e.setAttribute("style", "background: #E9967A; height: 40px;");
}

function unhighlight(e)
{
  e.setAttribute("style", "");
}

function btnHighlight(e)
{
  e.setAttribute("style", "background: #cc6699;");
}

function btnUnhighlight(e)
{
  e.setAttribute("style", "");
}

function refHighlight(e)
{
  e.setAttribute("style", "color: #0099cc;");
}

function refUnhighlight(e)
{
  e.setAttribute("style", "");
}

function approverHeader()
{
  var strAppHeader = "";
  
  strAppHeader += '<div id="title" class="titleHeader"><span><img src="images/genting_logo.png"\\></span></div>';
  strAppHeader += '<div id="tabs" class="pageTitle">MY WORKQUEUE</div>';
  
  return strAppHeader;
}


function scroll(elm){
    elm = document.getElementById(elm);

    //alert(blackberry.focus.getDirection());
    //alert(elm.name);
    switch(blackberry.focus.getDirection()){
        case 0 : // right
            elm.scrollLeft += 50;
            break;
        case 1 : // left
            elm.scrollLeft -= 50;

            break;
        case 2 : // up
            elm.scrollTop -= 50;
            break;
        case 3 : // down
            elm.scrollDown += 50;
            break;
    }
}

 The css file:

 

html
{
  height: 100%;
}

body
{
  padding:0;
  margin:0;
  background-color: #000000;
  color:#ffffff;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

#title
{
  background-color: rgb(200, 0, 0);
  height: 50px;
}

.divider
{
  height: 10px;
}

#content
{
  clear: both;
  font-size: 15px;
  color: #fff;
  padding: 5px;
  margin: 0 auto;
  overflow: auto;
}



.pageTitle
{
  padding: 10px 5px 0 15px;
  color: #ffffff;
  font-size: 16pt;
  font-weight: bold;
  letter-spacing: 1px;
}

.tablePending
{
  display: table;
  width: 940px;
}

.rowDisplay
{
  display: table-row;
}

.headerPending
{
  display: table-cell;
  background-color: #333333;
  color: #ffffff;
  font-size: 11pt;
  font-weight: bold;
  text-align: center;
  padding: 5px 5px 5px 5px;
  border-right: 1px solid #000000;
}

.dataPending
{
  display: table-cell;
  background-color: #cccccc;
  color: rgba(0, 0, 0, .9);
  font-size: 11pt;
  font-weight: bold;
  text-align: center;
  padding: 5px 5px 5px 5px;
  border-right: 1px solid #000000;
}

.widthPendRef
{
  width: 120px;
}

.widthPendRequester
{
  width: 300px;
}

.widthPendRemark
{
  width: 200px;
}

.widthPendDate
{
  width: 120px;
}

.widthPendAmount
{
  width: 150px;
}

.widthPendAction
{
  width: 150px;
}

.titleHeader
{
  text-align: center;
}

 In the approverPage() function I set the outer div#content to size of the phone so different phone the width of the div#content would be different. Div#content is also set to be scrollable so it can scroll the contents that are in the inner div (div.tablePending). The problems that I have now are:

 

- The focusable highlight(refHighlight()) feature will only focus on the item according to the width of the outer div (div#content) eventhough the inner div (div.tablePending) is longer than that. For example when I test on Curve 9630 only Ref, Requester and Remark will receive highlight focus. On Torch 9800 only Ref and Requester will receive highlight. I can still scroll but the rest of the data will not receive the highlight focus. - I have tried to change the width of div#content but then it will be longer than other div (div#title and div#tabs) when you scroll to the right.

Is there anyway to give focus div#content or div.tablePending without affecting the rest of the layout?

- I notice horizontal scrollbar is only visible in BlackBerry 5 but for BlackBerry 6 and BlackBerry 7 the scroll is missing. I have tried, overflow: auto; overflow: scroll but it they they won't show the version 6 and 7. Is there any solution for the scrollbar to display?

 

Sorry if it's too long or confusing.

Please use plain text.