-
AuthorPosts
-
September 4, 2010 at 5:42 pm #154049
Hello everybody 🙂
I have been playing around with JA Purity for the last couple of weeks, and I can’t find the solution for a (seemingly) easy problem…
The thing is I would like the template to “stretch” to the full height of the browser window, no matter what is the display resolution. I have set “margin: 0 “& “border: 0” in template.css for the body, and “min-height: 960px” for the “#ja-mainbody-f, #ja-mainbody-fr” ids, but there’s still a blank section at the bottom of the page at higher resolutions (tested @ 24″monitors). By the way, I have intentionally removed the footer – no need for it.
I have also played quite a bit with the style.css trying to figure that out, but since I have no coding background, it is quite difficult for me to understand what needs to be written where.
The site I am working on is currently at:
Any suggestions are highly appreciated!
Thanks!
gray Friend
gray
- Join date:
- October 2009
- Posts:
- 957
- Downloads:
- 0
- Uploads:
- 17
- Thanks:
- 28
- Thanked:
- 292 times in 230 posts
September 4, 2010 at 7:12 pm #354632To my knowledge it’s achievable only with the help of JavaScript.
First you need to know current screen resolution – it could be found with screen.height (info).
Then, you need to set a new CSS property to the element controlling the page height, you could use mootools. For example:
[PHP]
window.addEvent(‘domready’, function() {
wsize = screen.height – 100;
var body = $(document.body).set(‘styles’, {
‘min-height’:wsize
});
});
[/PHP]
Note that ‘min-height’ is not supported by IE6, and partially supported by IE7Resources: mootools 1.11 docs for Element and window.size.
September 4, 2010 at 9:58 pm #354644Hello Gray,
I appreciate your quick reply 🙂
Please excuse my ignorance, but I don’t understand JS at all, even as a concent…
So, based on your suggestion, I assumed I should add something like that to the <head> part in /templates/ja_purity/index.php:
<script type=”text/javascript” src=”http://hidropont.com/public_html/media/system/js/mootools.js”>
window.addEvent(‘domready’, function() {
wsize = screen.height – 100;
var body = $(document.body).set(‘styles’, {
‘min-height’:wsize
});
});
</script>Am I on the right path?
Thanks again 🙂
gray
- Join date:
- October 2009
- Posts:
- 957
- Downloads:
- 0
- Uploads:
- 17
- Thanks:
- 28
- Thanked:
- 292 times in 230 posts
September 4, 2010 at 10:24 pm #354647Mootools is already loaded by Joomla, you don’t need to call it again.
Try to include in <head> tags the following code. Note:
1. maybe it’s better to set ‘height’ instead of ‘min-height’ for better browsers’ compatibility, check both
2. you’ll need to adjust the number ‘100’ if the height is not enough/big
3. other elements could also influence the page’s dimensions
4. it’s better to test on clean JA Purity install if you already added a lot of ‘height’/’min-height’ tags
5. back-up, and again back-up before any testing
6. good luck! 🙂
[PHP]
<script language=”javascript” type=”text/javascript”>
window.addEvent(‘domready’, function() {
wsize = (screen.height – 100) + ‘px’;
var body = $(document.body).set(‘styles’, {
‘min-height’:wsize
});
});
</script>
[/PHP]1 user says Thank You to gray for this useful post
-
AuthorPosts
This topic contains 4 replies, has 2 voices, and was last updated by 
We moved to new unified forum. Please post all new support queries in our New Forum