Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages » Post-Kicker, -Byline & -Footer »

"Sticky" footer below bottom of page?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Sep 27, 2012, 11:21 AM
crashley1784
 
79 posts · May 2009
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?
  #2  
Old Sep 27, 2012, 12:08 PM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Sep 27, 2012, 01:59 PM
crashley1784
 
79 posts · May 2009
Ok...
So here's the javascript that (I assume) controls that feature:
Code:
<?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).

Code:
<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?

Last edited by crashley1784; Sep 27, 2012 at 02:02 PM.
  #4  
Old Nov 4, 2012, 06:01 PM
crashley1784
 
79 posts · May 2009
Never did get a reply for this issue, and I could really use some guidance...
Thanks
  #5  
Old Nov 5, 2012, 03:36 AM
juggledad's Avatar
juggledad
 
22,104 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you will need to add a new bariable in and add it to the total
HTML Code:
	/* 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
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Bookmarks

Tags
footer, sticky

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Delete "author" only on the "STICKY" posts. Bobbi Center area post/pages 1 Nov 5, 2011 05:28 PM
[SOLVED] v3.7.1 sticky note &quot;How do I create a No Sidebar page template?&quot;answer not w BlogKing Sidebars & Widgets 2 Oct 16, 2011 06:40 PM
Problems with "Sticky Footer" and "Rotate header images" globalnerds Center area post/pages 5 May 27, 2011 10:29 AM
ATA "Sticky Footer" and plugin conflict kdawes01 Post-Kicker, -Byline & -Footer 11 Apr 7, 2010 02:40 PM


All times are GMT -6. The time now is 12:57 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.