PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Aug 16, 2018 7:52 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Wed Oct 15, 2008 2:28 pm 
Offline
Forum Contributor

Joined: Sun Jun 08, 2008 11:25 pm
Posts: 186
In CSS, I have some pages that only ask for a few bits of information, and some that ask for a lot. In both cases, I use the following CSS:

#body {
min-height: 750px;
}

(And on IE6, I have to have a special CSS that reads: #body {height: 750px;}, but that's beside the point.)

The net effect of this is that it sort of keeps an even footer starting at 750px down the screen, or greater if the page is longer. The downside is when the case where someone has one of these widescreen laptops, which is becoming more and more common these days. For them, they end up seeing a lot of white space down the page, so they are inclined to scroll. When they go down, they don't see anything there.

So what's the fix? I mean, is there any way I can read the browser's headers on the home page of my site and make a guesstimate whether the user has a small vertical space or not and then switch CSS based on that?


Top
 Profile  
 
PostPosted: Wed Oct 15, 2008 3:47 pm 
Offline
Forum Contributor

Joined: Sun Jun 08, 2008 11:25 pm
Posts: 186
Here's what I ended up with:

Syntax: [ Download ] [ Hide ]
<div id="body">
<script>
var gScreenWidth = 0, gScreenHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
gScreenWidth = window.innerWidth;
gScreenHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
gScreenWidth = document.documentElement.clientWidth;
gScreenHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
gScreenWidth = document.body.clientWidth;
gScreenHeight = document.body.clientHeight;
}
if (gScreenHeight < 700) {
    var oBody = document.getElementById('body');
    oBody.style.minHeight = '520px';
    try {
        document.all.body.style.minHeight = '520px';
    } catch(ignore) {}
}
</script>
 
...rest of page.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group