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
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900

Fixed Header Nav Bar

I need to implement a fixed header nav bar on my app that works evenly across both trackpack & touch devices on OS5, OS6 and OS7. The kitchen sink example doesnt work well at all on OS5.

 

This is the flow of the page

 

<--- Fixed Header Nav bar --->

<--- Content page which scrolls --->

 

I've seen the existing solutions, none of them are effective in offering a smooth solution. Think the twitter app that has a fixed bar.

 

Help, much appreciated!

Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900

Re: Fixed Header Nav Bar

Just an update : Jquery Mobile and Webworks docs aren't helpful as the headers scroll with the page.

 

Thanks

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: Fixed Header Nav Bar

[ Edited ]

Hi there,

 

If you're looking for a solution on OS5 as well, jQuery mobile will be tough. Pre-6.0, the BlackBerry Browser is a proprietary implementation, instead of the Webkit engine used on 6.0+, and a lot of support is simply not there.

 

The main issue with fixed headers/footers is performance. Redrawing in scroll can impact devices quite a bit. Generally developers will lean towards hiding the fixed element while scrolling, and then making it visible once complete. A fade out/fade in transition can help smooth the process from a visual aspect.

 

If you're looking at a solution for OS6+, jQuery mobile could meet your needs. I did just try the following out on my device and both header and footer remained static:

http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/browser/toolbars.html

 

Associated CSS:

http://blackberry.github.com/WebWorks-Samples/kitchenSink/css/browser/toolbars.css

 

And JS:

https://github.com/blackberry/WebWorks-Samples/blob/master/kitchenSink/js/browser/toolbars.js

 

Unfortunately I don't have a 5.0 device on hand to test, however from what I can gather the sample merely places the two <div> elements on screen, and creates a scrollable content area in the middle, which would likely be supported on OS5 as well. This approach circumvents redrawing the static <div> on scroll, since only the content is scrolling.

 

EDIT: Is this the sample that you had issues with on OS5?

 

Let me know if you have any questions.

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900

Re: Fixed Header Nav Bar

Erik, thanks for your reply.

I did try this option but it doesn't work well with trackpad devices.

Would you suggest having the fixed toolbar only for OS 7?

Thanks
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
Registered: ‎04-12-2010
My Device: BlackBerry Z10

Re: Fixed Header Nav Bar

Ah yes, I can see how there might be issues on a trackpad. With that WebWorks implementation, perhaps it might be best to check for touchscreen capabilities (which could enable some 6.0 devices as well.)

 

The other option is the true "floating" div. Basically repositioning an absolute value <div> to follow scrolling. If you go that route though, again it is important to hide the div during scrolling as it will have a severe impact on performance if you are redrawing it constantly on scroll. That approach should be compatible with trackpad devices.

 

Erik Oros

BlackBerry Development Advisor


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900

Re: Fixed Header Nav Bar

Yeah I hear what your saying. Unfortunately, I believe the charm of the header will be lost if it keeps going away & coming back. Think 'twitter' the bar is cool because its sticky.

I guess I'll leave it out of the os5 & 6 build
Please use plain text.
Developer
burakk
Posts: 149
Registered: ‎04-23-2011
My Device: BlackBerry 9700 Bold

Re: Fixed Header Nav Bar

Same problem here. I am also looking for a solution to implement Twitter-like fixed toolbar with scrolling content below in my WebWorks app.

 

Back in the forum pages, I read that this fixed header toolbar can achieved by using Javascript extension of native code. Any guidance about this?

 

What are you going to use if you leave it out in OS 5 & 6 builds?

Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900

Re: Fixed Header Nav Bar

Well I'm planning to use multiple stylesheets & js files based on the os. So for 7, the bar would be fixed and for 5 + 6 it would scroll with the layout
Please use plain text.
Developer
burakk
Posts: 149
Registered: ‎04-23-2011
My Device: BlackBerry 9700 Bold

Re: Fixed Header Nav Bar

[ Edited ]

What about implementing header bar as a frame (by using iframe or frameset)? Can we achieve the desired result this way?

Please use plain text.
Trusted Contributor
zahirw
Posts: 134
Registered: ‎04-15-2012
My Device: Bold 9900

Re: Fixed Header Nav Bar

If you try that, make sure you test it as an app on your device, may not work as desired.

I'm going to try implementing the fixed header on OS7 next week. Will post back.
Please use plain text.