Skip navigation
Currently Being Moderated

Floating sticky footer

Nov 13, 2012 2:27 PM

I have a sticky footer on my web site http://www.justletmelearn.org that I got from Nancy O.  It works just great.  Recently a friend viewed the site using an IPAD, and Opera II Browser and a MAC OS.  It seems to be viewing in linux. 

 

The footer is floating in the middle of the page as the user scrolls down.  Is there a work around for this or something else I can do.

 

Thanks for any help,

 

Sandy Nelson

 
Replies
  • Currently Being Moderated
    Nov 13, 2012 2:55 PM   in reply to snelsoninthemtns

    You have some errors in your html that "could" be causing issues.

     

    Run your page through the validator here...

     

    http://validator.w3.org/

     

    Especially the multiple uses of ids. An html id can only be used once per page and can definitely affect css and .js throwing all kinds of display issues in the right situation.

     

    It also looks like your <body> tag closes before one of your <div> tags. That can also cause display probelms.

     

    If you clean up the errors and it is still displaying wrong, post back and someone should be able to help you find the problem.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 13, 2012 11:10 PM   in reply to snelsoninthemtns

    You can also use a simple CSS sticky footer.

     

    HTML:

     

    <div class="sticky">

    Some footer content

    </div>

     

    CSS:

    .sticky{

        position:fixed;

        bottom:0;

      background: #333;

      width: 100%

      }

    position: fixed will keep the footer 'stuck' even if the page scrolls down. Bottom: 0 will keep the footer at the very bottom. If nested within another wrapper/ container div, the 100% width will be nested to the parent div width.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 14, 2012 11:03 AM   in reply to snelsoninthemtns

    Sandy,

     

    I didn't view the site earlier on my iPhone. Now, I did. The site looks just fine on my Mac OS, iPod and iPhone that I viewed it on. The footer is stuck to the bottom.

     

    And your code for the sticky footer is just right - I don't see why this issue might be.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2012 10:31 AM   in reply to snelsoninthemtns

    Position:fixed is not well supported by older iOS devices (3.2 - 4.3) & Opera Mini (5.0 - 7.0). 

    http://caniuse.com/#search=fixed

     

    Fortunately, newer devices correctly display a fixed footer at page bottom. 

     

    Below is a jQuery hack to force fixed footers to display at viewport bottom in iPhone/iPad/iTouch. Note: I haven't tried this myself so I don't know what if any effect it may have on newer mobile devices.

    http://www.lazycoder.com/weblog/2010/05/27/quick-jquery-hack-to-fix-po sitionfixed-toolbars-in-iphoneipadipod-touch/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2012 11:32 AM   in reply to Nancy O.

    The jQuery fix is what you should do but if you're not so experienced then you could skip that and do some cross browser commenting to disable the stick footer depending on which browser as requesting the page. It's especially hard if running any other jQuery plugins. Do you know how to use cross browser comments to change what CSS is served?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2012 11:50 AM   in reply to snelsoninthemtns

    Here they care called CSS conditional comments:

     

    http://www.quirksmode.org/css/condcom.html

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 15, 2012 1:03 PM   in reply to marksey777

    @Marksey,

    Conditional Comments only work in IE.  Since this is an iOS issue and not an IE issue, that solution won't work here.

     

    I think the jQuery hack I posted earlier is the best solution for  iOS (iPad, iPhone, iTouch).

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 16, 2012 10:25 AM   in reply to snelsoninthemtns

    Copy & paste this code between the <head> and </head> tags in your documents.

     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    jQuery(document).ready(function($) {

         if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')

         {

         $("#DivName").css("position", "static");

         };

    });

    </script>

     

     

    Change #DivName to your fixed footer's div name.

     

     

    Good luck!

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 9:53 AM   in reply to snelsoninthemtns

    This forum doesn't support email attachments. 

    You need to log-in to the web forum.  Use the camera icon to insert images into your reply.

     

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2012 10:23 AM   in reply to snelsoninthemtns

    Fixed #header problem is the same as fixed #footer.  Amend your jQuery code to include the #header.

     

    $("#header, #footer").css("position", "static");

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 19, 2012 5:41 PM   in reply to snelsoninthemtns

    Short answer: don't use tricked up layouts that cannot be supported by all your target devices.  Remove fixed positioning. Allow the page to scroll normally from top to bottom.

     

    Long answer: Rebuild your site with CSS Media Queries.  In other words, one layout for mobiles, another for tablets and another for laptops/desktops.

    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points