Page 1 of 1
Synchronized divs
Posted: Sun Sep 18, 2005 3:15 pm
by Ree
Say, I need to make a two column layout - menu and content (divs, height not specified). Is it possible to make their heights identical all the time? That is, if menu height increases, so should the content div, and vice versa. Here are a few a rough examples:
Code: Select all
Menu Content
---------- -----------
MenuItem1 Text
MenuItem2
MenuItem3
---------- -----------
Menu Content
---------- -----------
MenuItem1 Text1
MenuItem2 Text2
Text3
Text4
Text5
---------- -----------
Menu Content
---------- -----------
MenuItem1
MenuItem2
<br />
<br />
---------- -----------
Of course, should be without tables.

So far I haven't found a way to do the same.
Posted: Sun Sep 18, 2005 4:35 pm
by raghavan20
I will give you the logic.
assign two divs to the menu and the main content.
use javascript and extract the height value of each div.
find which one is higher, use the highest length to set the other div.
you have to use dhtml and dom.
EDITED: meneu changed to menu
Posted: Sun Sep 18, 2005 4:54 pm
by raghavan20
This should have worked but it did not work.
may be some one else would figure out wots wrong with the script.
Code: Select all
<html>
<body>
<div id="menu" style = 'border:2px solid #0000FF'>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
</div>
<div id="mainContent" style = 'border:2px solid #0000FF'>My header</div>
<script type="text/javascript">
var menuHeight, mainContentHeight;
menuHeight = document.getElementById('menu').style.height;
mainContentHeight = document.getElementById('mainContent').style.height;
alert(menuHeight);
alert(mainContentHeight);
//alert(document.getElementById('mainContent').innerHTML)
if (menuHeight > mainContentHeight)
document.getElementById('mainContentHeight').style.height=menuHeight
else
document.getElementById('menu').style.height=mainContentHeight
</script>
<p><b>Note:</b> It is the script that changes the style of the element!</p>
</body>
</html>
Posted: Sun Sep 18, 2005 4:57 pm
by Ree
Well, that could probably work but doesn't it seem to be a bit of too much for this simple layout? Any other suggestions? Can't believe it's not possible with plain CSS, otherwise I'll probably have to use tables.

Posted: Mon Sep 19, 2005 1:30 pm
by ryanlwh
raghavan20 wrote:This should have worked but it did not work.
may be some one else would figure out wots wrong with the script.
Code: Select all
<html>
<body>
<div id="menu" style = 'border:2px solid #0000FF'>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
</div>
<div id="mainContent" style = 'border:2px solid #0000FF'>My header</div>
<script type="text/javascript">
var menuHeight, mainContentHeight;
menuHeight = document.getElementById('menu').style.height;
mainContentHeight = document.getElementById('mainContent').style.height;
alert(menuHeight);
alert(mainContentHeight);
//alert(document.getElementById('mainContent').innerHTML)
if (menuHeight > mainContentHeight)
document.getElementById('mainContentHeight').style.height=menuHeight
else
document.getElementById('meneu').style.height=mainContentHeight
</script>
<p><b>Note:</b> It is the script that changes the style of the element!</p>
</body>
</html>
typo on this line:
Code: Select all
document.getElementById('meneu').style.height=mainContentHeight
"meneu"....
don't know if that's the problem.
Posted: Mon Sep 19, 2005 1:51 pm
by raghavan20
Code: Select all
menuHeight = document.getElementById('menu').style.height;
mainContentHeight = document.getElementById('mainContent').style.height;
alert(menuHeight);
alert(mainContentHeight);
thanks for pointing that out
but there is some main problem
Code: Select all
document.getElementById('menu').style.height;
this does not return any value.
should figure out how to get the height of the div.
but more interesting thing is if I try to set the height value,,,it works
Code: Select all
document.getElementById('mainContentHeight').style.height=menuHeight
Posted: Mon Sep 19, 2005 2:36 pm
by ryanlwh
i had this thought that you can only get values which are set manually when I pointed out that typo, but I was not sure about it.
Now maybe that's the real problem...
EDIT: just read an article about this. try menu.offsetHeight
here's the link to that article
http://www.devarticles.com/c/a/Web-Desi ... aScript/3/
Posted: Mon Sep 19, 2005 3:45 pm
by raghavan20
this works finally after using offsetHeight but can not use offsetHeight to set the height instead style.height is used.
Code: Select all
<html>
<head>
<style>
div{
border:2px solid #000000;
}
</style>
</head>
<body>
<body>
<div id = 'menu'>
item1<br />
item2<br />
item3<br />
item4<br />
</div>
<div id = 'content'>
The actual script is in an external script file called "xxx.js".
</div>
<script type = 'text/javascript'>
var menuHeight = document.getElementById("menu").offsetHeight;
var contentHeight = document.getElementById("content").offsetHeight;
//alert (menuHeight + ":" + contentHeight) ;
if (menuHeight > contentHeight){
document.getElementById("content").style.height = menuHeight;
}
else{
document.getElementById("menu").style.height = contentHeight;
}
</script>
</body>
</html>