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
Contributor
tpae
Posts: 16
Registered: ‎10-07-2010
My Device: Not Specified
Accepted Solution

Blackberry widget static header/footer placement

I've been working on placing fixed header/footer in my blackberry widget. Here's my progress:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
	<head>
	    <meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
		<title>Blackberry Header and Footer</title>
        <script type="text/javascript">
            function resetScreen() {
                var screen_height = screen.height - 100;
                var screen_top = screen.height - 50;
                document.getElementById("content").style.height = screen_height + "px";
                document.getElementById("footer").style.top = screen_top + "px";
            }
        
            window.onload = function () {
                resetScreen();
            }
            window.orientationchange = function() {
                resetScreen();
            }
        </script>
        <style type="text/css">
            #header {  width: 100%; top: 0; margin: 0; height: 50px; background-color: #ccc; position: absolute; }
            #content { margin: 0; top: 50px; padding: 0; width: 100%; overflow:scroll; background-color: #333; position: absolute; }
            #footer { margin: 0; padding: 0; width: 100%; height: 50px; bottom: 0; background-color: #666; position: absolute; }
        </style>
	</head>
	<body>
        <div id="header">
            <h2>Title</h2>
        </div>
        <div id="content">

// content goes here

        </div>
        <div id="footer">
            <p>Footer stuff</p>
        </div>
	</body>
</html>

 It's obviously not the best coding in the world, but it seems to work OK, except I can't scroll the content when it's large.

 

I searched around, but couldn't find much information regarding it.

 

 

It would be nice to have a boilerplate of working header/footer, with hacks built in.

 

If I could somehow make the middle content overflow to be scrollable with touch screens, then it should be good to go, right? Also, implement other features.. etc...

Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300

Re: Blackberry widget static header/footer placement

I saw that the new jQuery mobile alpha had static header and footer elements. I haven't had a chance to look at the code behind it, but I think they are hiding the header/footer on a scroll and then repainting them on a stop.

 

May be a source of info for you... http://jquerymobile.com/

_________________________________________
www.jasonmace.com/blackberry
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Blackberry widget static header/footer placement

Yes, jQuery Mobile is removing headers/footers on scroll and then adding them back in when scrolling is done.

 

On mobile browsers it is very difficult to try and have static fixed position toolbars like on the desktop web.  They typically render their content differently because of the constrained hardware making fixed <div>'s perform poorly.  Painting when scrolling is a very expensive process.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
tpae
Posts: 16
Registered: ‎10-07-2010
My Device: Not Specified

Re: Blackberry widget static header/footer placement

I can't seem to integrate jquery mobile into blackberry widget...  is it proven to work?

Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300

Re: Blackberry widget static header/footer placement

I have not tried jQuery mobile yet, but some things you may be bumping into that I've seen documented.

 

Currently, jQuery mobile only supports the Torch and the BlackBerry webkit browser. They plan to bring older browsers into the mix as they continue with jQuery mobile (I think all the way back to the 4.7 browser on the storm).

 

second, I noticed that some of the jQuery file names contained a "-" . You will have to rename those files and make sure that all of the library links aren't broken between any files for the BlackBerry widget compiler to consume those resources.

 

just the two big things I can think of that you may be bumping into. I will post up if I get a chance to try out the library.

_________________________________________
www.jasonmace.com/blackberry