11-18-2010 04:43 PM - edited 12-02-2010 10:58 AM
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 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.
[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:
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
On the simulator they seem a little choppy but on the actual device they look pretty cool!!
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
11-19-2010 10:43 AM
I've updated the example to now have some nicer looking toolbars with toolbar buttons
11-19-2010 01:11 PM
Thanks a ton Tim!!
No problem.. it has been bugging me for a long time
11-22-2010 01:16 PM
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.
11-25-2010 10:36 PM
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
11-26-2010 07:01 AM