Fixed header in Jqtouch

Question

What should i change in the basic theme of jqtouch to have a fixed header (+ footer maybe...)? I have tried with position:fixed.. but nothing worked...

Answer 1

Mobile Safari doesn't support position:fixed (at least not in a way that makes it useful for web development).

Alternatively you could try to implement this javascript solution

Answer 2

As Thomas pointed out there's no support for this in the current version of Mobile Safari that runs on iPhone.

If you're using jQTouch anyways, take a look at the "floaty" extension that comes bundled with the latest downloads. It adds a floating div that moves along with your scrolling, albeit with some delay. The behavior is very similar to the "archive" bar in the mobile GMail interface.

Here's the extensions page on jQTouch that mentions floaty: http://code.google.com/p/jqtouch/wiki/Extensions

Just download the latest bundle and everything is there. It's not a perfect solution, but it's better than nothing.

Answer 3

Check out this plugin for jQTouch - http://code.google.com/p/jqtscroll/

Answer 4

Take a look at this site: http://demo.lvengine.net/mobileuplink

Note that it uses an extra div:

<div id="jqt">

Take a look at the javascripts and css from this site. The author modified the original jqtouch scripts a bit to fit this modification.

For a "fixed" footer, e.g. tab bar, you simply add an addition div at the same level as div#jqt:

<div id="other">
    <div class="tabbar">
        <ul>
            <li class="two"><a href="first.html">first tab</a></li>
            <li class="two"><a href="two.html">second tab</a></li>
        </ul>
    </div>
</div>

Then code up the css for .tabbar. Use mine as example:

 .tabbar 
{
    position: absolute;
    bottom:0px;
    width:100%;
    height:48px;
    border-top:1px solid #444;
    overflow:hidden;
    padding: 0;
    margin: 0;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
}

.tabbar li
{
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: smaller;
    display: block;
    text-align: center;
    border-right:1px solid #333;
    border-left:1px solid #6a6a6a;
}

.tabbar li:first-child
{
    border-right:1px solid #333;
    border-left:0;
}

.tabbar li:last-child
{
    border-right:0;
    border-left:1px solid #6a6a6a;
}

.tabbar ul
{
    border: 0;
    margin: 0;
    list-style: none;
}

.tabbar a 
{
    padding: 0;
    margin: 0;
    display:block;
    text-decoration:none;
    font-size: 0.8em;
    color:#eee;
    line-height:1.6em;
}

.tabbar li.two      {width: 50%;}