Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Body Height to 100% (http://forum.bytesforall.com/showthread.php?t=1654)

monardo May 14, 2009 08:07 AM

Body Height to 100%
 
Hi you all,
I am trying to get the body (all the contents) to be always 100% in height.
That is to avoid what you can see in the attachment.
I guess this is not a very big deal but I can't seem to get it done!

Thanks a lot!

http://www.fgplus.com/atahualpa/atahualpa01.jpg

Flynn May 14, 2009 09:32 AM

Add to the existing jQuery code in header.php, i.e. after

jQuery("ul.tw-nav-list").addClass("clearfix");

this:

var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}

if you have padding, margin, borders around table#layout you may have to adjust the actual height being set for table#layout, i.e.

var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
var targetheight = layoutheight - 30; /* div#wrapper - 2*15px for padding around table#layout */
jQuery('table#layout').css({height: targetheight + 'px'});
}

monardo May 14, 2009 10:07 AM

Hi Flynn,
Thanks a lot for the quick response.

Unfortunatelly it didn't work... Now, since I am not a programmer, I am never sure about what I do when it comes to coding!

So here goes the bit of header.php that I changed, just for you to check if it is ok:

jQuery("ul.tw-nav-list").addClass("clearfix");
var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
});
//-->


I checked and erased anything related with padding, margins and borders around table#layout. In any case I also tried the second version of your code with no success either.

Any other idea?
Thanks!

Flynn May 14, 2009 10:17 AM

The closing bracket is missing

var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}

monardo May 14, 2009 10:35 AM

Sorry Flynn, but still nothing changed...

Here is what I tried:

jQuery("ul.tw-nav-list").addClass("clearfix");
var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}

//-->
</script>
<?php wp_h....


and

jQuery("ul.tw-nav-list").addClass("clearfix");
var windowheight = jQuery('window').height();
var layoutheight = jQuery('div#wrapper').height();
if ( windowheight > layoutheight ) {
jQuery('table#layout').css({height: windowheight + 'px'});
}
});

//-->
</script>
<?php wp_h....


Just in case I wasn't able to explain myself, I just uploaded an image... what you see on the left is how I see it now online... and what you see on the right is how I'd like it to be.

http://www.fgplus.com/atahualpa/atahualpa01.jpg

Flynn May 14, 2009 05:33 PM

Try this, works for me:

// strech short pages to full height, keep footer at bottom
var windowheight = jQuery(window).height();
var headerheight = jQuery("td#header").height();
var footerheight = jQuery("td#footer").height();
var layoutheight = jQuery("div#wrapper").height();
if ( windowheight > layoutheight ) {
var newmiddleheight = windowheight - headerheight - footerheight - 43;
jQuery("td#middle").css({height: newmiddleheight + "px"});
}

monardo May 15, 2009 02:22 AM

Hi FLynn,
At this point I am starting to feel dumb, but... still couldn't make it work.
I am sending you the code you sent me, with the previous and following lines, just for you to see where I am inserting it...

jQuery("ul.tw-nav-list").addClass("clearfix");
// strech short pages to full height, keep footer at bottom
var windowheight = jQuery(window).height();
var headerheight = jQuery("td#header").height();
var footerheight = jQuery("td#footer").height();
var layoutheight = jQuery("div#wrapper").height();
if ( windowheight > layoutheight ) {
var newmiddleheight = windowheight - headerheight - footerheight - 43;
jQuery("td#middle").css({height: newmiddleheight + "px"});
}
//-->
</script>

Flynn May 15, 2009 05:52 AM

You keep removing the last

});

Don't remove anything, just add the code I posted above

monardo May 15, 2009 07:22 AM

Sorry about that!
I did it as you said now and it seems to work fine in Firefox, but:

- it creates a vertical scrollbar in Safari
- it doesn't work in Opera

Everything in Mac.
If you want to check it out you can visit www.in-spire.biz/site/

Cheers!

Flynn Jul 12, 2009 10:29 AM

See http://forum.bytesforall.com/showthr...0042#post10042 for a new version, tested in FF 2/3, IE 6/7, Safari, Opera

This will also be a theme option in 3.4.2

Walt Sep 9, 2009 07:44 AM

v. Atahualpa 3.4.2

It appears that this didn't make it into the latest version.

How can I set a minimum height for all the entire theme?


Great theme, thanks.

Flynn Sep 15, 2009 04:58 PM

Do you have Atahualpa Theme Options -> "Style and Edit Footer" -> Sticky Footer on short pages?

Walt Sep 26, 2009 11:18 AM

I think that was the only option in Atahaulpa 3.4.2 that I haven't messed with. It worked perfectly.


All times are GMT -6. The time now is 12:29 AM.

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