Synchronized divs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Synchronized divs

Post 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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

EDITED: meneu changed to menu

Post 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>
Last edited by raghavan20 on Mon Sep 19, 2005 1:52 pm, edited 1 time in total.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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. :)
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post 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/
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post 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>
Post Reply