Solved

How can i adapt main wrapper and container to higher screen resolution?

Posted on 2008-10-28
13
914 Views
Last Modified: 2012-08-13
The picture below shows the most basic structure of my page.

The Container also has some backgroundsettings and stuff wich
shouldn't affect the size of the DIVs.

There also is a javascript when the page loads that makes the site
adapt in width depending on screen size since both tableparts width
is not fixed but needs to be resizable. This is done with setting
td width to 100%, works like a charm.

My problems arrive first when i want to set the HEIGHT on the page (main_wrapper)
All elements are floated left now, and both tableparts have a fixed height.
Wich when setting the page higher actually just sets the page higher.. that's nice..

But i would like a layout working like this:

1024x768 mode:
The height of the page doesn't matter that much and Container could shrink around the content of the
page since it in this mode automaticly adds scrollbars to the page due to the amount of content. And that's ok.

Higher resolution:
It should adapt the height of main_wrapper as well as the height of Tablepart2 and loginform to fit in
the "new" height. And finally the footer should be placed on the bottom of the page.

I have had some serious headache from this, but then again i'm no pro like you..
<DIV id="main_wrapper">
 

//////////////////////////////////////////////////////////////

// DIV logo - LOGO AND SUCH                                 //

//                                                          // 

//////////////////////////////////////////////////////////////

// DIV Container divided in two DIVs.    //                 //

// DIV1 - loginform                      // DIV2 - adds     //

// ------------------------------------- //                 //

// | Tablepart1 - contains text and    | //                 //

// | the actual login form             | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |-----------------------------------| //                 //

// | Tablepart2 contains               | //                 //

// | ways to create new member,        | //                 //

// | demo of service etc.              | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |                                   | //                 //

// |-----------------------------------| //                 //

//                                       //                 // 

//                                       //                 // 

//////////////////////////////////////////////////////////////

// DIV footer divided in two DIVs        //                 //

// DIV1 - links                          // DIV2 - extras   // 

//////////////////////////////////////////////////////////////
 

</DIV>

Open in new window

0
Comment
Question by:walkman69
  • 5
  • 5
  • 3
13 Comments
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 22824210
This is not a really straight-forward problem to solve because you have to take it apart a bit. Let's look at a couple of points to get you started:
  1. First, make your footer an absolutely positioned div. On resize or render, you'll have to get its offsetHeight and provide it as a reference.You'll also set its "top" position the height of the viewport minus its height. Here's a convenience function to get the viewport height:

        function getViewportHeight() {
          var vpHeight = self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
          return vpHeight;
        }

    So, "top" would be calculated as:
    var footer = document.getElementById("footer");
    var footerTop = getViewportHeight() - footer.offsetHeight;

  2. The cool thing about getting footerTop is that it will also double as the reference height for the rest of your containers. The simplest thing to do would be to wrap your header and body containers within another div, then set its height as footerTop.

  3. I'm assuming your header is a fixed height, so to size the body area, simply subtract the header's height from the footerTop value. Even if your header is not a fixed height, you can still get its offsetHeight and subtract if from footerTop.
The point to all this is that you have to think about this type of resizing with respect to reference containers and "sized" containers. Once you identify which containers you'll use as references, it's simply a matter of sizing the other containers relative to those references.
0
 
LVL 2

Author Comment

by:walkman69
ID: 22827099
That sounds like it could really work out nicely..
I had hoped i could perhaps solve it with less javascript and more CSS.
But then again i'm using javascript already and i need a quick solution for a prototype.
So it probably will work just fine..

The only thing i was worried about at a first glance
was that the footer would end up somewhere on top of the body or header when calculating it's position with viewportHeight - footer.offsetHeight.. But when have a smaller viewport i'll have to check for this in the script and use your other solution to just set it's position to the sum of Header and Bodys Height.

I'll try this out the first thing tomorrow. It is a very good solution and the points are as good as yours already. Just have to see how much this slows down the page and if some other problems araises.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22827467
"I had hoped i could perhaps solve it with less javascript and more CSS."

Sure you can do this easily with CSS, if you want the page to occupy ALL the browser, just do this --

BODY, HTML  { width:100%; min-width:100%; height:100%; min-height:100% }

Now you are taking 100% of the browser space, no matter what the browser screen size.  WHat more do you need?
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 22827765
In theory, doing the above will work, and in fact, I actually failed to mention that you have to give 100% height to both html and body. However, in practice, because you're dealing with elements that have a visual dependency upon each other if not necessarily a physical dependency, you need to introduce JavaScript into the equation to correctly size elements with respect to each other.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22827773
you only need CSS to size the page to the maximum browser screen size -- works on all resolutions.
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 22827865
With respect to performance, I've actually applied this very technique to a fairly complex interface that I'm currently working on (sorry can't share the code, as I'm using a proprietary object framework that I'm not ready to publish yet), and it works great across all the browsers. The challenge will be that you will have to add some extra height offset to Mozilla-based browsers when calculating the top position of the footer and the height of the center content area because Mozilla actually cuts the viewport short when you set it 100% in the CSS. In other words, you'll have to do a bit of eye-balling to get it to work fully cross-browser. But once you've figured out the offsets, it'll work flawlessly.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Author Comment

by:walkman69
ID: 22836266
I'm sorry for keeping you waiting guys, i've been busy up to my knees today with other things.

ok, some comments on scrathcyboys comments:

C1:

"BODY, HTML  { width:100%; min-width:100%; height:100%; min-height:100% }"

This sets some kind of referense for the other objects on the page to relate to correct?
I mean doesn't the browser automaticly figure that the page should be viewed in the whole window if possible? And is this not neccesary to do in internet explorer as well?.. (since i.e seems to have something against min-width/min-height).

Right now i'm using the following for i.e:

div#main_wrapper
{
    width: expression(document.body.clientWidth < 1000? "1000px" :
    document.body.clientWidth > 1800? "1800px" : "auto");
}

Perhaps it's not a good idea to limit the max-size.
But i admit that i ripped this code straight off to see if it could work. ^^

C2:

"Now you are taking 100% of the browser space, no matter what the browser screen size.  What more do you need?"

I need the header to have a fixed height, the container to wrap around two <table>-parts

(The table parts i would rather have as DIV's.. but hey.. it's complicated already. And i have no other way to make shadows that can grow in size and still be transparent). perhaps i'll redo theese on a later occation..)

As i said it should wrap around them when in a smaller sized browser window and grow higher in a larger browser window, and to get the footer to be placed at the bottom. It's to much static sized information on the page to show it on the page all at once on a 1024x768 resolution, but ok when on a larger screen. And i don't want to shrink the content when on a lower resolution, otherwise that could have been one approach.

so i guess what i really need is for the main_wrapper to never be smaller than all of the content objects heights. And that the CONTAINER and ADDS grows in size when the page grows higher. And makes sure that the footer always ends up exactly at the bottom of the page, not 3 px above it, and preferrably with the margins still intact. But how do i make the CONTAINER and ADDS grow with CSS?.. do i apply a percentual height to it? last time i tried setting it to 100% the page became twice the height of the original height. Still it works in my width solution. that's just wierd.

Or is GoofyDawg's comment "you need to introduce JavaScript into the equation to correctly size elements with respect to each other." the answer?.

How would you have done? it's tempting to apply the javascript method, but in the end css is always css and a lot faster.. right?
0
 
LVL 12

Accepted Solution

by:
GoofyDawg earned 500 total points
ID: 22836620
You have to use a combination of CSS and JavaScript for this solution. Setting body and html to 100% is actually crucial because the browsers don't in fact extend the viewport to 100% by default. They almost always fall short. It just seems as if they do because most pages' content extend past the boundaries of the viewport. But when you're doing viewport-dependent layouts such as this, it's necessary to ensure the viewport size is at 100%.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22837283
"I mean doesn't the browser automaticly figure that the page should be viewed in the whole window if possible? "

No no no and NO!  You misunderstand -- Divs are only as big as the text in them or what you specify.  Same for BODY in tableless layout.  Anyway, learn a bit about what I posted, and good luck.
0
 
LVL 2

Author Comment

by:walkman69
ID: 22841810
"Divs are only as big as the text in them or what you specify.  Same for BODY in tableless layout."

ok, that figures.. well i theoreticaly found out a way to get the result i wanted, based on GoofyDawgs  note about javascript and heights. But the problem is that i can't get the heights that i want..

i'm trying to do:
if ((document.body.clientHeight) > (document.getElementById('main_wrapper').style.height))

but the right argument doesn't return anything.. at all.. nada... " " .. it should atleast return something like not assigned value or something when throwing it on the screen with alert.
And that makes my statement always true. Neither does the other DIVs like header and footer return anything.

so i tried to pull a stunt that i've done before and use the DomLoaded way, displayed
underneath.. since i.e for example can't get size-information from elements till they are loaded properly.
Then i do my alert in the init() instead.. But it still doesn't show any value..

    var DomLoaded =
    {
        onload: [init()],
        loaded: function()
        {
            if (arguments.callee.done) return;
            arguments.callee.done = true;
            for (i = 0;i < DomLoaded.onload.length;i++) DomLoaded.onload[i]();
        },
        load: function(fireThis)
        {
            this.onload.push(fireThis);
            if (document.addEventListener)
                document.addEventListener("DOMContentLoaded", DomLoaded.loaded, null);
            if (/KHTML|WebKit/i.test(navigator.userAgent))
            {
                var _timer = setInterval(function()
                {
                    if (/loaded|complete/.test(document.readyState))
                    {
                        clearInterval(_timer);
                        delete _timer;
                        DomLoaded.loaded();
                    }
                }, 10);
            }
            /*@cc_on @*/
            /*@if (@_win32)
            var proto = "src='javascript:void(0)'";
            if (location.protocol == "https:") proto = "src=//0";
            document.write("<scr"+"ipt id=__ie_onload defer " + proto + "><\/scr"+"ipt>");
            var script = document.getElementById("__ie_onload");
            script.onreadystatechange = function() {
                if (this.readyState == "complete") {
                    DomLoaded.loaded();
                }
            };
            /*@end @*/
           window.onload = DomLoaded.loaded;
        }
    };

Do you know what's wrong?
0
 
LVL 2

Author Comment

by:walkman69
ID: 22842033
Ok.. i just figured out what my problem with that statement was..
as you mentioned earlier goofyDawg you said offsetHeight. not height.. ^^   my bad..

i'll dig into this again..
0
 
LVL 2

Author Comment

by:walkman69
ID: 22853011
Finally I made it work.. But when I took the height of the main_wrapper it returned the height minus the hight of footer.. wich makes sense since i positioned it absolute..i'm just curious why when I tested to change it to static that it worked in Explorer, but not in Firefox.. seems wierd.. Ooh well, it works and it's not to slow either so it's a nice solution =)..

Even tough scrathcyboy had some good comments as well. I guess my points goes to you
GoofyDawg since my solution builds on your first comments.

You have been to great help both of you! =).. Thanks!
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 22853585
Static positioning should work in Firefox, and not in IE... weird. But I wouldn't recommend using static positioning in any case. Absolute should work just fine.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
spacing 5 32
USE HTML to redirect a webpage to a local Xcel file. 2 25
while loop in html mail format 5 34
Login area of a page 4 20
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now