JavaScript and client side scripting.
Moderator: General Moderators
Ree
Forum Regular
Posts: 592 Joined: Fri Jun 10, 2005 1:43 am
Location: LT
Post
by Ree » Sun Sep 18, 2005 3:15 pm
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.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Sun Sep 18, 2005 4:35 pm
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.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Sun Sep 18, 2005 4:54 pm
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 » Sun Sep 18, 2005 4:57 pm
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 » Mon Sep 19, 2005 1:30 pm
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.
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Mon Sep 19, 2005 1:51 pm
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 » Mon Sep 19, 2005 2:36 pm
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/
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Mon Sep 19, 2005 3:45 pm
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>