Show hide menu

JavaScript and client side scripting.

Moderator: General Moderators

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 gave you some sample code already, as have others.

You shouldn't be doing table-based layouts anyway - this will only be the first of many problems if you do.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Re: Cut and Paste

Post by dibyendrah »

a.heresey wrote: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.
Thanks a.heresey for this sample.

I got it working from following with a little modification on it.

Code: Select all

<script language="javascript">
function toggleMenu(menuId){
	var menuStyle = document.getElementById(menuId).style;
	menuStyle.display = (menuStyle.display == 'block')? 'none':'block';
	return false;
}
</script>

Code: Select all

<table width="100%">
<td width="15%" height="100%" valign="top" align="left" id="menuId">
--Menu Goes Here --
</td>
<td width="85%" valign="top"  id="body">
--Body Contents Goes Here --
<a href="#" onclick="javascript:toggleMenu('menuId');">Show/Hide</a>
</td>
</table>
If you could suggest on how to expand the width of body content to 100% after hiding the menu, it will be higly appreciated.

Thank you.
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

There's something in the way

Post by a.heresey »

Maybe if you wrote another function that rewrote the table when the menu was hidden. But I'm sure you'll find that a silly solution.

You could make the menu and the body two separate tables, and then when you hide one the other would flow into its space.

But if you're going to do that, why not just make them two seperate divs? Divs are like little stretchy tables that will make your life easier. You can even put tables into divs.

Don't be afraid. Join us. 8O
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post by dibyendrah »

Yes, I agree wtih you. Creating a two different tables and putting menu in one and body contents on another table will make easier to implement show/hide menu. I'll definitely try this and come back here soon.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

dibyendrah, you really should use table-less layouts. If you decide that you want to learn I'm sure that Ninja Space Goat and I, along with many others, will help you learn.

Using table-less layouts makes things like showing and hiding menus and other flashy garbage much easier to implement.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post by dibyendrah »

Thank you Daedalus and all others for supporting. I'll definitely go for table-less layouts and come back here with the effort I made based on your suggestions.
Post Reply