Show hide menu

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Show hide menu

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post by dibyendrah »

Please provide an easier way to do this. :wink:
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

check out jquery
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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%.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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%');
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post by dibyendrah »

Thank you all. I"ll try these suggestions and post the final code that I have tried.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I think it should be:

Code: Select all

menu.style.display = 'none';
and

Code: Select all

menu.style.display = 'block';
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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.
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Cut and Paste

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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().
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

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