Forum Moderators: open

Message Too Old, No Replies

relative height for divs

javascript for div height

         

evil_alex

11:21 pm on Jan 15, 2005 (gmt 0)

10+ Year Member



First of all great forum, found it so useful for loads of things (even though this is my first post).

I have only just started using javascript for this 1 script, so I am not a 'pro' yet. I have been looking around trying to find some solution to my problem and spent hours changing little bits in the code to get it working but no luck so far... I have spaced it out a bit using different functions and I guess I could do it in 1 function + window.onresize but I was just testing.

The basic layout of the site is a header div containing a nav div, and then 2 columns below. The left column is quite long and the right column is about the same size on all pages, but a bit too big for 800x600 res and so has a scroll bar. What i am aiming for is that the left div fills the remaining space after the header (clientheight-86), unless the right div is larger than clientheight-86, in which case left and right should be of equal height.

function size() {
if (document.getElementById("right").style.height > document.body.clientHeight-86)
{equal()}
else
{resize()};
}
function equal() {
document.getElementById("js").style.height = document.getElementById("right").style.height;
}
function resize() {
document.getElementById("js").style.height = document.body.clientHeight-86;
}
window.onresize = function () {
size();
}

Is there alse any special way that height should be added in the html/css? At the moment i have tried not stating the height anywhere and also the + [var] + style but i couldn't get either working.

One other thing... Is there any way to get javascript to delete some html so i could make the site compatible for people who don't have javascript enabled (by writing extra divs and then having javascript delete them, and using writeln('') to make extra divs), or is just having javascript to add a CSS attribute (display: none;) the only way?

Thanks in advance,
Alex

JAB Creations

8:38 am on Jan 17, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It sounds very similer to what I have achieved with my site WITH the help of some great folks at this very forum.

If you're trying to get this to work in all browsers be aware that you will need to use CSS. Also you will need code to fix Opera 6 a little. You can rip the code from my site (link in my profile) and message me if you need help.

I learn stuff here and I want to make those who helped me proud and help those after me :).

evil_alex

9:41 pm on Jan 24, 2005 (gmt 0)

10+ Year Member



thanks for the help m8, got a little further but decided to change the layout of the whole site to cut down on javascript and css, and so that i can update it easier.