Page 1 of 2
Show hide menu
Posted: Thu Jan 18, 2007 2:17 am
by dibyendrah
I have a table with two columns on which I have placed a menu at first column with 20% width an 80% width has been given to second column. I want the feature which can show or hide menu. When menu is hidden, I want the width of second column to be 100%. Is that possible ?
Any help will be highly appreciated.
Thank you.
Posted: Thu Jan 18, 2007 6:31 am
by dibyendrah
Please provide an easier way to do this.

Posted: Thu Jan 18, 2007 6:35 am
by Kieran Huggins
check out jquery
Posted: Thu Jan 18, 2007 12:25 pm
by dibyendrah
Sounds interesting and but seems complex to do this small stuff.

I just need to hide a left column and make the right column of a table 100%.
Posted: Thu Jan 18, 2007 1:31 pm
by daedalus__
I never use tables so I couldn't tell you correct code to change table widths off the top of my head but it could look something like:
Code: Select all
function hidemenu()
{
menu = document.getElementById('menu');
body = document.getElementById('body');
if (menu.display != 'none')
{
menu.display = 'insert display style here';
body.width = '80%';
}
else
{
menu.display = 'none';
body.width = '100%'
}
}
yeah, that should be a good start although that code probably doesn't work, rofl, it should give you an idea.
Posted: Thu Jan 18, 2007 4:16 pm
by Kieran Huggins
in a case like this, you have to remember that html tables aren't grouped by column. I'd strongly suggest using jquery because you can use CSS selectors to find and alter DOM elements (like "table tr td:first-child" to select the left-most column).
The jquery command would look like:
Code: Select all
$('table tr td:first-child').hide();
$('table tr td:last-child').css('width','100%');
Posted: Fri Jan 19, 2007 12:46 am
by dibyendrah
Thank you all. I"ll try these suggestions and post the final code that I have tried.
Posted: Fri Jan 19, 2007 4:34 am
by dibyendrah
Sorry guys. I was unsuccessful by applying your codes. I haven't tested jquery which I'm planning to do tonight.
I have done like below :
Code: Select all
<table width="100%">
<td width="15%" height="100%" valign="top" align="left" id="menu">
--Menu Goes Here --
</td>
<td width="85%" valign="top" id="body">
--Body Contents Goes Here --
</td>
</table>
Code: Select all
function hidemenu()
{
menu = document.getElementById('menu');
body = document.getElementById('body');
if (menu.display != 'none')
{
menu.display = 'insert display style here'; //what to do here ?
body.width = '85%';
}
else
{
menu.display = 'none';
body.width = '100%'
}
}
What to assign for the following line ?
Code: Select all
menu.display = 'insert display style here';
Thank you.
Posted: Fri Jan 19, 2007 9:25 am
by Kieran Huggins
I think it should be:
and
Posted: Fri Jan 19, 2007 11:40 am
by daedalus__
The code I posted was not supposed to work correctly, it is only for reference so you can see one way to manipulate this table. If I was you, I wouldn't even use tables.
I do not know if it will work properly because you aren't using CSS to define the width of your table fields.
Kieran is correct, though, element.display = 'block' and element.display = 'none' should go in there somewhere.
Cut and Paste
Posted: Fri Jan 19, 2007 7:35 pm
by a.heresey
This is how I hide my menus. I use css to position everything, however.
Code: Select all
function toggleMenu(){
var menuStyle = document.getElementById(menuId).style;
menuStyle.display = (menuStyle.display == 'block')? 'none':'block';
return false;
}
It's essentially the same as Daedalus', with no blanks for you.
If that's not working: I think that if you change your td widths to 20% and *, when the menu dissapears, the body should take over.
Posted: Mon Jan 22, 2007 2:33 am
by dibyendrah
I was so busy for few days on office works. So I couldn't log into devnetwork forum. Now, there are so many things to try now from all your suggestions. Thank you all for your help. I'll definitely try that and let you all know that.
Posted: Mon Jan 22, 2007 4:21 am
by dibyendrah
Do we have to add some style to <td> tag before using the following javascript statement ?
Code: Select all
document.getElementById(menuId).style
Suppose I have a menu under following <td> tag :
Code: Select all
<td width="15%" height="100%" valign="top" align="left" id="menuId">
I'm poor in javascript. So, please don't mind.
Posted: Mon Jan 22, 2007 8:35 am
by feyd
The style object property exists pretty much always. Your statement may have a problem finding the element though due to not passing a string to getElementById().
Posted: Tue Jan 23, 2007 1:28 am
by dibyendrah
If somebody provides a sample code just to show how to do a simple show hide menu under following HTML, it will be highly appreciated. And please do me a favour by adding the style you all have suggested. I think after hiding the menu , body content cell need to be resized to 100% and vice versa.
Code: Select all
<table width="100%">
<td width="15%" height="100%" valign="top" align="left" id="menu">
--Menu Goes Here --
</td>
<td width="85%" valign="top" id="body">
--Body Contents Goes Here --
</td>
</table>