1

I'm trying to make a iPad like toobar at the bottom of my webpage, using the free jqTouch framework. Here's an example I was trying to copy off (first random iphone image i googled for).

enter image description here

Now, a previous StackOverflow question sorta answers it .. but i'm not sure how to extended that answer to include

  1. 4 or so sections (eg. friends, person logged in (if they are), etc.)..
  2. Keep that toolbar at the bottom, no matter what. The middle content is scrollable. but the header and this footer should always be visible.

Can this be done?

Community
  • 1
  • 1
Pure.Krome
  • 84,693
  • 113
  • 396
  • 647

3 Answers3

2

Actually your link won't help you at all because position:fixed isn't supported in Mobile Safari and brokenly supported in Android. You are going to need a plugin like iscroll, and some fixed positioning, it a bunch of work to get it all working together. However fear not, if you are not interested in going through the pain of developing this yourself, people have done the work for you. See the DataZombies fork of jqTouch, and you can see that in the demo he has a working bottom toolbar (with Badges even!)

Kris Erickson
  • 33,454
  • 26
  • 120
  • 175
1

To include a tab bar in jQTouch, you'll want to download a later version of jQT than r109, the default package from their homepage. Go to its GitHub to grab a later version of source.

Then, take a look at this post: Fixed header in Jqtouch, and this demo: http://demo.lvengine.net/mobileuplink.

Community
  • 1
  • 1
William Niu
  • 15,798
  • 7
  • 53
  • 93
0

i'm working on my version, to add a fixed tabbar on jQtouch http://www.itabbar.com

it's working with jQtouch, iScroll and the iTabbar

this work with the latest jQtouch version

Here a online demo (only Safari and Chrome for desktop browser)

Gino
  • 1,834
  • 2
  • 19
  • 20