Hey all,

I've customized the footer to be 100% the width of the page (per a thread I found on here somewhere), and to include 3 widget areas. In ATA options > Footer, I have the stick footer to bottom of page on short pages set to Yes. The problem is that when the page is short, the footer appears below the bottom of the browser window, forcing a scrollbar. You can see what I mean here:
http://www.laurenacooper.com/ohprefresh/client-login/

What I want is for the bottom of the footer to be at the bottom of the page. What do I need to modify to make it do this?

you will have to edit the jscript that handlws the sticky footer since you are no longer using the div ID that is in the code.

Ok...
So here's the javascript that (I assume) controls that feature:

<?php if ( $bfa_ata['sticky_layout_footer'] == "Yes" ) { ?>
	/* Strech short pages to full height, keep footer at bottom. */
	
	/* Set a compensation value to fix browser differences and an overall 
	misalignment with this method */
	if (jQuery.browser.msie || jQuery.browser.safari) { 
		var bfacompensate = 41; 
	} else { 
		var bfacompensate = 21; 
	}
	
	/* Fix a jQuery/Opera 9.5+ bug with determining the window height */
	var windowheight = jQuery.browser.opera && jQuery.browser.version > "9.5" &&
    jQuery.fn.jquery <= "1.2.6" ? document.documentElement["clientHeight"] : jQuery(window).height();
	
	/* Top and bottom padding may have been set on the BODY */
	var paddingtop = parseInt(jQuery("body").css("padding-top"));
	var paddingbottom = parseInt(jQuery("body").css("padding-bottom"));
	
	/* Get the height of the header, footer, and the layout as a whole */
	var headerheight = jQuery("td#header").height();
	var footerheight = jQuery("td#footer").height();
	var layoutheight = jQuery("div#wrapper").height();
	
	/* Adjust height of middle column if (layout height + body padding-top + body padding-bottom) is smaller than 
	height of browser viewport */
	if ( windowheight > (layoutheight + paddingtop + paddingbottom) ) {
		var newmiddleheight = windowheight - paddingtop - headerheight - footerheight - paddingbottom - bfacompensate;
		jQuery("td#middle").css({height: newmiddleheight + "px"});
	}  
<?php } ?>

Now, the div that contains the footer (and stretches the full width of the page) is div#divfooter.
Here is the code from my footer (pulled from page source).

<td id="footer" colspan="1">
    </td></tr></table></div></div>
<div id="divfooter"><div><table id="tablefooter">
<tr><td>
<table id="footer" class="bfa_widget_area" style="table-layout:fixed;width:100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td id="footer_1" align="left" valign="top"><div id="nav_menu-2" class="widget widget_nav_menu"><div class="widget-title"><h3>Explore</h3></div><div class="menu-footer-nav-container"><ul id="menu-footer-nav" class="menu"><li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-96"><a href="#">Return to Home Page</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97"><a href="#">View our Menu of Services</a></li>
<li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-98"><a href="#">Learn more about Oh Happy Pets</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-99"><a href="#">See what our Clients are saying</a></li>
<li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-100"><a href="#">Find answers to common questions</a></li>
</ul></div></div>
</td>
<td id="footer_2" align="left" valign="top"><div id="text-2" class="widget widget_text"><div class="widget-title"><h3>Socialize</h3></div>			<div class="textwidget"><p>
<a target="_blank" title="Find Oh Happy Pets on Facebook" href="https://www.facebook.com/pages/Oh-Happy-Pets/142364292448749?ref=ts">
<span class="social-icon-large">f</span>
<span class="social-text-footer">Find us on Facebook</span>
</a>
</p>
<p>
<a target="_blank" title="Find Oh Happy Pets on Google+" href="#">
<span class="social-icon-large">g</span>
<span class="social-text-footer">Connect with us on Google Plus</span>
</a>
</p>
<p>
<a target="_blank" title="Find Oh Happy Pets on Yelp" href="#">
<span class="social-icon-large">y</span>
<span class="social-text-footer">Check us out on Yelp</span>
</a>
</p>
<p>
<a target="_blank" title="View our profile on Kingwood.com" href="#">
<span class="social-icon-large">k</span>
<span class="social-text-footer">View our profile on Kingwood.com</span>
</a>
</p></div>
		</div>
</td>
<td id="footer_3" align="left" valign="top"><div id="text-3" class="widget widget_text"><div class="widget-title"><h3>Keep in Touch</h3></div>			<div class="textwidget">Contact us stuff will go here.</div>
		</div>
</td>
</tr></table>
Copyright &copy; 2012 <a href="http://www.laurenacooper.com/ohprefresh/">Oh Happy Pets</a> - All Rights Reserved    
    
    </td>


</tr>

So can you give me an idea of what I would need to adjust, please? I see that the code I entered closes the default table and then creates a new div containing another table, so how do I make the JS account for that?
Now, I know next to nothing about JS, but I can read, and in looking at this code I see that it is adding(?) the heights of all the different page elements, and then subtracting that from the height of the middle column. I think. I'm even worse at math... but my first instinct is that I would need to add the div / table that was created with my code to that calculation somehow. Am I close?

Never did get a reply for this issue, and I could really use some guidance...
Thanks

you will need to add a new bariable in and add it to the total

	/* Get the height of the header, footer, and the layout as a whole */
	var headerheight = jQuery("td#header").height();
	var footerheight = jQuery("td#footer").height();
	var layoutheight = jQuery("div#wrapper").height();
	
	/* Adjust height of middle column if (layout height + body padding-top + body padding-bottom) is smaller than 
	height of browser viewport */
	if ( windowheight > (layoutheight + paddingtop + paddingbottom) ) {
		var newmiddleheight = windowheight - paddingtop - headerheight - footerheight - paddingbottom - bfacompensate;
		jQuery("td#middle").css({height: newmiddleheight + "px"});

and then test and see if it works for you