Sticky Footer on iPhone Mobile Web?

Discussion in 'Mobile Web Development' started by iDakota, Jan 21, 2010.

  1. iDakota

    iDakota Member

    Joined:
    Dec 30, 2008
    Messages:
    431
    Likes Received:
    16
    Device:
    iPhone 4S (Black)
    I would appreciate help on this.
    I've tried these methods, and many others:

    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    http://www.wickham43.net/headerfooterfix.php


    _______________________________________________


    What I am trying to do is use the below image:

    Please Register or Log in to view images



    and make it mimic the iPhone's bottom bar like that of the App Store, Cydia, and other apps.

    Though I want to do this in a iPhone Web App.
    (so it will be fully screen, and look like an app, though it will be an HTML document / web app.

    When I use the methods above, it overlays ontop of the page, but doesn't move with the page. Like if you were to scroll down on the app store to view more apps, this just stays in the same place and scrolls to the top.
    _____________________________________________________


    I would do it by just making the app itself, but I do not have a mac. SO this is an alternative to manually creating an app / web app.

    Thanks.
  2. SiXAXiS

    SiXAXiS Banned

    Joined:
    Dec 19, 2007
    Messages:
    1,915
    Likes Received:
    5
    Device:
    iPhone 3GS (White)
    Maybe make a viewfinder for the content? (this is hard to explain....)
  3. Samuel98

    Samuel98 New Member

    Joined:
    Jan 28, 2010
    Messages:
    1
    Likes Received:
    0
    Re : Sticky Footer on iPhone Mobile Web? Reply to Thread

    Is it possible to create a sticky header or footer such that no matter where you scroll the header/footer stays put? I'm looking for a HTML/css/javascript solution for iPhone/webkit.
    ----------------------------------------------------------------------------------

    travel deals to mexico | Colorado home loan | cataract treatment
  4. deeboy55

    deeboy55 New Member

    Joined:
    Feb 2, 2009
    Messages:
    297
    Likes Received:
    0
    Device:
    iPad
    Actually it is very possible.. i had a similar problem when trying to make a sticky footer for my blog.. I'll get to work now but bear in mind if i manage to accomplish it please note it will only be a plain black bar along the bottom with 'hello world' text in

    Please Register or Log in to view images

  5. Shawa

    Shawa Super Moderator

    Joined:
    Jan 31, 2009
    Messages:
    3,188
    Likes Received:
    22
    Device:
    Nexus 4
    Does 'position: fixed' not work on mobile Safari?
  6. deeboy55

    deeboy55 New Member

    Joined:
    Feb 2, 2009
    Messages:
    297
    Likes Received:
    0
    Device:
    iPad
    Okay done it...
    Just create a div at the bottom of the page like #menu:
    Then insert your images into this (float them right) and add this to the CSS style:
  7. Winterboard

    Winterboard Well-Known Member

    Joined:
    Dec 26, 2007
    Messages:
    2,345
    Likes Received:
    53
    Device:
    iPad 2 (Black)
    look on the iwebkit forums. there are multiple guys that created such a thing.
  8. iZ3RO

    iZ3RO Member

    Joined:
    Jan 1, 2009
    Messages:
    765
    Likes Received:
    0
    Device:
    iPad

Share This Page