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
Highlighted
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Fixed Position Toolbars [Example]

[ Edited ]

Hi Everyone,

 

From hanging out on the forums you get to see just how many people are struggling with fixed position toolbars allowing for scrollable content.  This is actually one of the trickiest UI challenges in the web for mobile devices.

 

Typically on a desktop you would create a Fixed position <div> with a higher z-index and call it a day Smiley Happy However on mobile devices the ability to render scrolling content underneath these fixed <div>'s is a real performance challenge.  It typically ends in a "jumpy" <div> that just looks plain bad.

 

So I started to look at the jQuery mobile implementation of fixed position toolbars where they took a chapter from the iPad and changed the problem.  Basically you make the toolbars disappear when the user is scrolling and then have them re-appear when the scrolling ends.

 

Again this is challenging since each mobile browser triggers scrolling events differently and it is usually pretty tough to figure out when the scrolling has ended.  It's usually some kind of combination of touch and scroll events.

 

So I decided that I would create a JavaScript Extension that will allow you to subscribe to scroll events so that you can create this type of show/hide toolbar pattern.  

 

[DISCLAIMER: The code in my github fork and attached in this thread have just been tested by me in a few scenarios and it may not be bullet proof.  Please use at your own digression.  They have been tested both on Storm 5.0 and Torch 6.0]

 

You can download and build my scroll event extension here:

https://github.com/tneil/WebWorks/tree/master/api/ui/event/

 

OR....

 

The scroll event extension is also bundled in with the sample application attached to this post that shows how you can combine these scroll events with CSS layouts to provide a pretty cool fixed position toolbar UI.  One thing you'll note is that I'm not handling orientation change events in my code so you'll have to tweak it to get it just the way you want.  You could also use CSS animations in BlackBerry 6 to show and hide the toolbars Smiley Happy

 

On the simulator they seem a little choppy but on the actual device they look pretty cool!!

 

UI GUIDELINES!!!

While fixed position toolbars are really cool when it comes to touch devices... They are a very POOR user experience when it comes to trackpad devices using a focus based navigation model.  The reason for this is that you must scroll to the top of all the displayed content to reach the top toolbar, and scroll all the way to the bottom of the content to reach the bottom toolbar.

 

In this case you are much better to make your toolbars scroll with the entire content of the screen.  It will actually provide a better user experience and also allow your user to view more valuable information since the toolbar isn't taking up screen real estate.

 

I have updated the download to show some different techniques on how to provide different UI interactions between a touch and trackpad device.  The BlackBerry Torch is a bit tricky since it has both.  There are still some quirks in my sample code but it is relatively functional combining touch and trackpad on the BlackBerry Torch.

 

We are also still working out some of the kinks in the trackpad navigation in the WebWorks framework on a Torch since it has both inputs.

 

I hope you enjoy the code Smiley Happy

 

toolbars.png

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Fixed Position Toolbars [Example]

I've updated the example to now have some nicer looking toolbars with toolbar buttons Smiley Happy

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 185
Registered: ‎08-17-2008
My Device: Red BlackBerry Z10
My Carrier: Vodafone

Re: Fixed Position Toolbars [Example]

Thanks a ton Tim!!

Josep Maria
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Fixed Position Toolbars [Example]

 


miamon wrote:

Thanks a ton Tim!!


No problem.. it has been bugging me for a long time Smiley Wink

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 213
Registered: ‎10-02-2010
My Device: Z10 and Z30
My Carrier: Play and Plus

Re: Fixed Position Toolbars [Example]

Thank you very much Smiley Happy I was waiting for that solution Smiley Happy

Developer
Posts: 22
Registered: ‎11-18-2009
My Device: Not Specified

Re: Fixed Position Toolbars [Example]

[ Edited ]

Yup that problem was nagging me to =)

 

Thanks! Smiley Happy

Developer
Posts: 63
Registered: ‎10-07-2009
My Device: Not Specified

Re: Fixed Position Toolbars [Example]

all run correctly in a focusable navigation?

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Fixed Position Toolbars [Example]

Hi aserra,

 

I highly recommend not using fixed toolbars on a Trackpad device that does not have touch.. it provides a poor user experience.  I have outlined some of the reasoning in the main post in this thread.

 

I have also updated the sample attached to the first post to show some techniques on how to enable/disable the fixed toolbars based on Touch or Trackpad navigation.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Trusted Contributor
Posts: 227
Registered: ‎09-03-2010
My Device: Not Specified

Re: Fixed Position Toolbars [Example]

Hello tneil

 

I tested the extension of the scroll event and I encountered the following problem. Everything works great on the first page, then if you try to use the extension on another page it gives you much trouble and does not work in full

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Fixed Position Toolbars [Example]

Ok, I'll take a look... It may not be clearing the callback subscriptionwhen the page changes
Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter