Search code examples
javascripthtmlblackberryblackberry-webworksiscroll

Blackberry Fixed Header and Footer in Webworks


Is there any way to create a fixed header and footer in Webworks for Blackberry Phones 6.0+?

I tried using iScroll - works fine on Tablet OS but not on BlackBerries, it works fine in the browser but stops workings when "compiled".

It seems anything with position: absolute; will shrink the entire page down.

Header <- absolute
Content <- normal
Footer <- absolute

For some reason the entire page shrinks down to 40ish pixels (the height of the header)

both html and body have height at 100% and content div is outside the header:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Help would be much appreciated!


Solution

  • In BB 6 browser fixing header and footer with absolute/fixed position is buggy. When you scroll positioned elements move along with page. When you stop scrolling it back to top / bottom as per the position. I would suggest using javascript to find the height of the device & fix them.

     #header{
      height:50px;
    }
    
    #footer{
      height:50px;
    }
    

    JS

        function setHeight(){
        width = screen.availWidth;
        height = screen.availHeight;
        $('#content').height(height-100);   
    }