I'm new to jQuery / Javascript so bear with me. I have the following code (below). The two blocks I'm wondering about are currently commented out as they don't work - but I'd like them to work. It positions the footer based on the height of the about page. Problem is, it only checks when the website loads, and doesn't recheck the code when you go to a new page.

For example, you start on About, the footer is position bottom. You go to the home page and it doesn't reset the footer back. I've found it's due to being inside line 1's pageinit function... but I don't fully understand how that line even works.

Any explanation would be great.

Code:

$( document ).on( "pageinit", "[data-role='page']", function() {

$.extend($.event.special.swipe,{
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
durationThreshold: 600, // More time than this, and it isn't a swipe.
horizontalDistanceThreshold: 100, // Swipe horizontal displacement must be more than this.
verticalDistanceThreshold: 60, // Swipe vertical displacement must be less than this.
});

This is called sticky footer and there are hundreds out there, just do a google search. Here's one http://www.egstudio.biz/sticky-footer-with-jquery/ But a fast way to paste the footer to the bottom of the viewing screen is with css:
#footer {
position:fixed;
bottom:0;
}

Give it a dark back ground so the main content doesn't show through.

03-28-2013, 06:23 PM

rnd me

using fixed will cover-over other content at the bottom on the page, unless padding/margins are built in.

OP should really be using the age-old clearfix to simply push the footer to the bottom using a few lines of CSS. google "clearfix" for 1,000,001 examples.