08-26-2012 08:33 PM - edited 08-26-2012 09:27 PM
Im building an app and I keep gettting this problem half white screen along the navigation buttons. Am I putting a div in the wrong place?
Solved! Go to Solution.
08-26-2012 09:26 PM
Here is a better picture. It seems that I do not have a div in the wrong spot. Some something is being weird.
08-27-2012 01:17 AM
Do you have any errors in the Web Inspector? How do you initialize bbUI.js and which version do you use? My index.html header looks like below and haven't got your issue, maybe something is missing for you:
function bbUI() {
/* do: add the bbui.ini(..) stuff here*/
}
function WWready() {
console.log("WebWorks APIs are now available");
document.removeEventListener("webworksready", WWready);
/* do: set up bbUI.js and add first screen */
bbUI();
}
function DOMready() {
console.log("DOM & Content are now available");
window.removeEventListener("load", DOMready, false);
/* do: wait until WebWorks is ready */
document.addEventListener("webworksready", WWready);
}
window.addEventListener("load", DOMready, false);
08-27-2012 05:13 AM
Where you want that div to be? Because bbUI.js puts the ActionBar using this CSS:
position="fixed"; bottom: 0;
Which makes it "float" at the bottom of any screen.
08-27-2012 11:40 AM - edited 08-27-2012 11:41 AM
well to be honest i have no idea whats goign on. i can show some of my code on here.
<!-- timerstuff--><head> <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" /> <link href="css/bootstraper.css" rel="stylesheet"> <link href="css/default.css" rel="stylesheet"> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/hiit-timer.js"></script> <script src="js/buzzer.js"></script> </head> <div data-bb-type="screen" data-bb-effect="fade" data-bb-scroll-effect="off"> <div class="container"> <header class="page-header"> </header>
<div id="settings-fields" class="form-inline well"> //*my timer stuff </div> <div id="countdown-area"> //*my timer stuff </div> <!--endtimerstuff--> <!--nav start--> <div data-bb-type="action-bar" data-bb-tab-style="highlight"> <div data-bb-type="action" data-bb-style="tab" data-bb-img="images/about.png" onclick="bb.pushScreen('about.html', 'about');">About</div> <div data-bb-type="action" data-bb-style="tab" data-bb-img="images/exit.png" onclick="blackberry.app.exit()">Exit</div> </div> </div> <!--nav end-->
08-27-2012 12:07 PM
Is this a screen you are adding using the bb.pushScreen method or is this your main screen? In both you need to fix your source code since:
Try to clean/fix your source, I think it should work then.
08-27-2012 12:08 PM
08-27-2012 12:09 PM - edited 08-27-2012 12:09 PM
but this isnt my .index page
08-27-2012 12:13 PM
Have a closer look at the bbUI.js samples from the latest next branch (v0.9.4) and how it is structured. If this is your main/index the bbui-initialization is missing (bb.init(...)) and the after your closing </head> element there should be an empty <body></body>. The first screen then should be added just after you initialized the bbUI object.
08-27-2012 12:16 PM
Since it isn't your index remove the header and add all the <script> tags to the div container of your screen. The Action-Bar example adds <script> tags just below the <div> of bb-type="screen".