Show hide menu
Moderator: General Moderators
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
Show hide menu
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.
Any help will be highly appreciated.
Thank you.
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
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:
yeah, that should be a good start although that code probably doesn't work, rofl, it should give you an idea.
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%'
}
}
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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:
The jquery command would look like:
Code: Select all
$('table tr td:first-child').hide();
$('table tr td:last-child').css('width','100%');- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
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 :
What to assign for the following line ?
Thank you.
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%'
}
}
Code: Select all
menu.display = 'insert display style here'; - Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
I think it should be:
and
Code: Select all
menu.style.display = 'none';Code: Select all
menu.style.display = 'block';- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
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.
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
This is how I hide my menus. I use css to position everything, however.
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.
Code: Select all
function toggleMenu(){
var menuStyle = document.getElementById(menuId).style;
menuStyle.display = (menuStyle.display == 'block')? 'none':'block';
return false;
}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.
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
Do we have to add some style to <td> tag before using the following javascript statement ?
Suppose I have a menu under following <td> tag :
I'm poor in javascript. So, please don't mind.
Code: Select all
document.getElementById(menuId).styleCode: Select all
<td width="15%" height="100%" valign="top" align="left" id="menuId">- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
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>