CODEWITHSUNDEEP
javascriptandroidiphonemobileweb
ftsk33
ftsk33

Reputation: 145

Mobile browser persistent footer (Non jquery)

I'm looking for a non-jquery solution to add a persistent footer overlay to my mobile site. It is similar to a popup ad that is on top of content but anchored to the bottom of the page.

I've been using a javascript approach to this:

window.addEventListener(
    'scroll',
    function() {
        //if scrolled and offsets are the same (iphone)
        if(_self.initOffsetY == window.pageYOffset)
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight+"px";
        }
        else
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight - window.pageYOffset+"px"; 
        }
    },
    false
);

where initPage Height is the initial page height and initOffsetY is the initial offset of the page. This takes care of the case with the browser menu bar.

But it doesn't really work too well on android. The positioning is off. Can someone explain why? Thanks

Upvotes: 0

Views: 445

Answers (3)

danbgray
danbgray

Reputation: 582

If you're attached to this approach of floating an element to where you want it / approximating position:fixed, you're going to have a number of things to check, one being html code that you've got to make sure there aren't any margins or padding interfering with the above script. The quick hack solution would be to just measure the heigh difference and calibrate your script according to that. The number you get from the calibration might be helpful in determining the source of the problem. There are probably some additional tricks to make this work smoothly, but I would go with a library thats being used already, and it looks like there are a number of them: http://bradfrostweb.com/blog/mobile/fixed-position/

btw - the iscroll4 library will fix the scrolling issue with overflow:auto on ios < 5, android < 4

Upvotes: 0

Misha Reyzlin
Misha Reyzlin

Reputation: 13896

You should probably use either of these standalone scrolling helpers: http://joehewitt.github.com/scrollability/ or http://cubiq.org/iscroll

Upvotes: 1

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6114

Wouldn't it be better to have two separate elements, a main wrapper and a footer div perhaps, and enable scrolling in just the wrapper (overflow:auto;)? This would avoid most browser inconsistencies, or even cases where JS is turned off.

There's a drawback though. You will need to program a method for scrolling inner elements for some mobile devices. There are libraries for this (gasp!), but frankly it isn't too hard to program yourself (as I've done with my site).

Upvotes: 0

Related Questions