Monday, December 4, 2006

Auto Resize div according to windows size.

Welcome back guys, This week i decided to share you with a small problem i've encountered this week and of course, the solution. Hopefully it will save you some time in case you'll get there too.
While developing a calendar based on AJAX, i had a div container that included all the Calendar's data.
Thus, the container was set as overflow: auto. The problem was, that i wanted the container to be with 100% width, and 100% height, however, percents didn't do the trick, so i thought what about width: auto? well, that did the trick on the width side, but on the height side i still had a problem.
After spending some time thinking about the problem, I decided to fold my sleeves, and get to work.
I wrote some code that manually alters the height of the container to fit the page size.
The code has been tested in FF 2.0 and IE 7.0.
So let's go through the solution.

Firstly, i borrowed couple classes and altered em' a little to get a reference to an object and the width,height of window (though i'm using only the height value).

function getObj(name){
if (document.getElementById){
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all){
this.obj = document.all[name];
this.style = document.all[name].style;
}
}


This class does a simple job, it gets an ID as the parameter, and contains a reference to it's obj and style.

function getWinSize(){
var iWidth = 0, iHeight = 0;

if (document.documentElement && document.documentElement.clientHeight){
iWidth = parseInt(window.innerWidth,10);
iHeight = parseInt(window.innerHeight,10);
}
else if (document.body){
iWidth = parseInt(document.body.offsetWidth,10);
iHeight = parseInt(document.body.offsetHeight,10);
}

return {width:iWidth, height:iHeight};
}

The above class contains the Height and Width of the viewable window.
Now that we've got the actual Height of the window, Let's adjust the size of our container to fit the page.
function resize_id(obj) {                           
var oContent = new getObj(obj);
var oWinSize = getWinSize();
if ((oWinSize.height - parseInt(oContent.obj.offsetTop,10))>0)
oContent.style.height = (oWinSize.height - parseInt(oContent.obj.offsetTop,10));
}


What the function is doing is rather simple. We create a reference to our container oContent. Then we get the size of the window and store it in oWinSize.
Now, we are setting the new size of our container to be the (Size of the window)-(The distance of our container from the top of the window) and the result is, our container will remain at the same starting point, however, will last until the bottom of the screen. Mission accomplished :)
Now that we have a function that resizes our container to stretch all over the screen, let's make sure we call it every time the window size changes.
we can either write
window.onresize = function() { resize_id('ID_of_Container'); } 
Or inside
<body onResize="resize_id('ID_of_Container');">

Where ID_of_Container is the ID of the container we are willing to be stretched out.

Well guys, Until next week....
P.S
Any comments are welcomed, also questions :)

Yours, Blond R.

12 comments:

Kroesss said...

Hello Blond R,

I think this post of yours could be the answer to a problem I've been having with a website of mine. I just can't get your solution to work, probably because I'm implementing your functions in the wrong way.

Could it be possible to post an example-page with this code? So we could see where all the code goes?

Thanks,
Roy

NetMyWay said...

I was able to install the phpmyadmin on Windows Vista, but do you know how to install the phpmyadmin on Windows 2000?
Please help.

uday said...

I have a strange problem while using this code, i have added a table in a div which is set for height 100%, it work fine in IE and FF, but when i keep on increasing the table rows it is adding an extra space at top of div (only in IE). Can you tell me why is this happening.

rameshsr said...

Hi Blond,

Thanks for the code. I am using IE 6. I am trying to make this code work in IE 6, but so far no luck. I see that you mentioned IE7. But what would be different in IE 6 to make this work?

robones said...

i found i had to change the resize code to
function resize_id(obj) {
var oContent = new getObj(obj);
var oWinSize = getWinSize();
var n=oWinSize.height - parseInt(oContent.obj.offsetTop,10);
if (n>0)
oContent.style.height = n.toString()+"px";
}
before it worked

crystal sexylingerie said...

Article is very interesting,thanks for your sharing. I will necessarily add it in the selected works and I will visit this site.


plastic machinery
plastic recycling
Granulator
Extruder
Twin Screw Extruder
Extruder machine
Pipe Extrusion System
Profile Extrusion System
WPC Production line
Plastic Auxiliary Machine
Extruder machine
Pallet racking
Racking system
Racking
Pallet rack
Flow racking
Cantilever racking
Light duty rack
Mezzanine rack
Flow Racking
Racking accessories
Racking manufacturer

crystal sexylingerie said...

subject:Led sign,Illuminated Signs,light box and neon sign manufacturer

Article is very interesting,thanks for your sharing. I will necessarily add it in the selected

works and I will visit this site.

Led sign
Illuminated Signs
light box
neon sign
China neon sign
Solar Light Box
Led displays
Solar Gas Sign
Neon sign manufacturer
Solar Light Box
artificial grass
synthetic grass
Aritficial Grass for Landscaping
Fake Grass
Artificial Grass for Sport
Economical Grass for Landscaping
Fibrillated Grass for Sport
Monofilament Grass for Landscaping
Monofilament Grass for Sport

crystal sexylingerie said...

I have read your article.Article is very interesting,thanks for your sharing. I will necessarily add it in the selected works and I will visit this site.

Welcome to my website:

x-ray machine
hospital bed
Autoclave
dental chair
Dental Unit
Infant Incubator
Operating Lamp
Laboratory Centrifuge
Powder Coating
powder paint
Polyester Epoxy Powder Coating
Epoxy Powder Coating
China powder coating
Polyester Powder Coating
Epoxy Powder Coating
Decorative Powder Coating
Pearl Powder Coating
Metallic Powder Coating
Heat Transfer Printing Powder Coating
Heat Transfer Printing Paper
Clear Powder Coating
Transparent Powder Coating
Polyurethane Powder Coating
Acrylic Powder Coating

Shirley said...

I didn't expect to get this kind of useful and interesting content, as today more and more sites are turned out to be rubbish, big thx
China Beijing tours

贤重 said...

One summer afternoon, Former President Bill Clinton and his wife Hillary were vacationing in their home state of Arkansas. Jimmy Choo handbags After a long road trip, they stopped at a service station to fill up their car with gas.A blind man, with a seeing eye dog at his side, walks into his local grocery store.Miumiu handbags He walks to the middle of the store, picks up the dog by the tail, and starts swinging the dog around in circles over his head.Mulberry handbagsAn ambitious young blonde woman, in need of money, decided to hire herself out as a handyman-type. She began, door to door, canvassing a wealthy neighborhood for work. She went to the front door of the first house and asked the owner if he had any jobs for her to do.

Sudarshan said...

Question for everyone- The code thats posted- is that in javascript? or php? I have an html web page, and i want to put this code in my head. Do I put this code inside "script type=text/javascript>" tags?
or do i put it someway else?

robert said...

yes its javascript, just stick it in the javascript area