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

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

Note that it uses an extra div:

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:

    

        

            
first tab
            
second tab
        
    

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%;}