newby expanding menus

[nezbo]

Hi all

 

I am just starting out with javascript today, but i have been doing php for about 6 months and loving it  .

 

I have this code that i have found and i am modifiying and i am not to sure how to get it to work...

 

what i am trying to do is when you click on the top table it drops down the menus. or it starts with the ment open then minimises it when it it clicked on...

 

This is what i have so far...

 

<script language="javascript">
function showLinks()
{
document.getElementById('myLinks').style.display='block';
}
function hideLinks()
{
document.getElementById('myLinks').style.display='none';
}
if (document.getElementById('myLinks').style.display = 'block')
{
var linka = 'onclick="hideLinks()"';
}
else
{
var linka = 'onclick="showLinks()"';
}
</script>

<table align="center" border="1">
<tr><td><a onclick="hideLinks()">test</a></td></tr>
<tr id="myLinks" style="display:block"><td><a href="http://www.google.com">Google</a></td></tr>
</table>

 

 

 

 

[tinker]

You need some CSS, and you need to nest the tables which are shown / hiden, see this better example.

[emehrkay]

You're off to a good start. You just need to write a function that listen to a click of the test link

 

Here is how I would do it

 

window.onload = function(){

var link = document.getElementById('test_link');

link.onclick = function(){

var myLinks = document.getElementById('myLinks');

if(myLinks.style.display == 'block'){

//call function to hide

}else{

//call function to show

}

return false; //so that nothing happens when the link is clicked

};

};

 

 

[tinker]

I didn't really read I just looked... here's my two penneth, but it always seems to get bigger...

<script language="javascript">
function hideLinks()
{
var e = document.getElementById('myLinks').style;
if(e.display == 'none')
{
	//e.display = 'inline';
	e.display = 'block';
	//e.display = 'list-item';
}
else
{
	e.display = 'none';
}
}
</script>

<table align="center" border="1">
<tr><td><a onclick="hideLinks()">test</a></td></tr>
<tr id="myLinks" style="display:block"><td><a href="http://www.google.com">Google</a></td></tr>
</table>

 

So I tried some things like for this:

 

<script language="javascript">
function hide_links(lname)
{
var e = document.getElementById(lname).style;
if(e.visibility == 'hidden')
{
	//e.visibility = 'inherit';
	e.visibility = 'visible';
}
else
{
	e.visibility = 'hidden';
}
}
</script>

<table align="center" border="1">
<tr><td>
<a onclick="hide_links('my_links')">test</a>
<a onclick="hide_links('my_links2')">test</a>
</td></tr>
<tr id='my_links' style="visibility:visible;position:absolute;"><td><a href="http://www.google.com">Google</a></td></tr>
<tr id='my_links2' style="visibility:visible;position:absolute;"><td><a href="http://www.google.com">Google2</a></td></tr>
</table>

 

However I still prefer using nested tables as shown in the link... sorry!

[tinker]

and that other version looks like this:

<script language="javascript">
function hide_linksy(lname)
{
var e = document.getElementById(lname).style;
if(e.visibility == 'hidden')
{
	e.visibility = 'visible';
	e.position = 'relative';
}
else
{
	e.visibility = 'hidden';
	e.position = 'absolute';
}
}
</script>

<table align="center" border="1">
<tr><td><a onclick="hide_linksy('my_linksy')">MENU</a>
<table id='my_linksy' style="visibility:visible;position:relative;">
	<tr><td><a href="http://www.google.com">Google1</a></td></tr>
</table>	
</td></tr>
<tr><td><a onclick="hide_linksy('my_linksy2')">MENU</a>
<table id='my_linksy2' style="visibility:visible;position:relative;">
	<tr><td><a href="http://www.google.com">Google2</a></td></tr>
</table>	
</td></tr>	
</table>

Not tested to see how w3c compliant it is though...

[nezbo]

Cheers All

 

It is working great now, thank you for all your help...

 

here is a link to see it in action...

 

http://www.eastlancsmedicalservices.co.uk/

 

If if any idea how to keep it set to non expanded when the user comes back or changes page?

 

 

 

and that other version looks like this:

<script language="javascript">
function hide_linksy(lname)
{
var e = document.getElementById(lname).style;
if(e.visibility == 'hidden')
{
	e.visibility = 'visible';
	e.position = 'relative';
}
else
{
	e.visibility = 'hidden';
	e.position = 'absolute';
}
}
</script>

<table align="center" border="1">
<tr><td><a onclick="hide_linksy('my_linksy')">MENU</a>
<table id='my_linksy' style="visibility:visible;position:relative;">
	<tr><td><a href="http://www.google.com">Google1</a></td></tr>
</table>	
</td></tr>
<tr><td><a onclick="hide_linksy('my_linksy2')">MENU</a>
<table id='my_linksy2' style="visibility:visible;position:relative;">
	<tr><td><a href="http://www.google.com">Google2</a></td></tr>
</table>	
</td></tr>	
</table>

Not tested to see how w3c compliant it is though...

[tinker]

All that compliance took was:

<script type="text/javascript">

 

For it to start off all closed:

<table id='my_linksy2' style="visibility:hidden;position:absolute;">
	<tr><td><a href="http://www.google.com">Google2</a></td></tr>

 

And if you need to reset it just make a little function which sets all the links and call it from an 'onload' from the 'body' tag.

 

In my cms I name the id's the same as the link and then use php_self to expand the current pages' menu...

[nezbo]

when i change the <script type="javascript"> to <script type="text/javascript"> i get an error on the page... i am not to sure why i am geting this?

 

also i need to be able to save the settings in a data base so when the use logs on it sets up the menus the way they like then.

the reaion for this is when ther user logs on it opens up a load more menus and options and they are all not needed all the time...

 

i was thinking that i could use the update in mysql, and i am also using php...

 

 

 

 

All that compliance took was:

<script type="text/javascript">

 

For it to start off all closed:

<table id='my_linksy2' style="visibility:hidden;position:absolute;">
	<tr><td><a href="http://www.google.com">Google2</a></td></tr>

 

And if you need to reset it just make a little function which sets all the links and call it from an 'onload' from the 'body' tag.

 

In my cms I name the id's the same as the link and then use php_self to expand the current pages' menu...

[tinker]

What do mean 'settings', to show a menu or not, depending whether they are logged in.

 

Otherwise what's the menu structure, is it just a list, is it sets of menus, etc?

[nezbo]

What do mean 'settings', to show a menu or not, depending whether they are logged in. Yes...

 

What do mean 'settings', to show a menu or not, depending whether they are logged in.

 

Otherwise what's the menu structure, is it just a list, is it sets of menus, etc?

 

 

 

[nezbo]

sorry a bit hung over and didnt read it properly.

 

i have it setup the not show menus if they dont have permetions, but what i need is to ::

 

if the person has minimised the menu on there last visit it will update in the database and when they login it detects what menus was minimised and wets tehm to minimised.

 

hope this helps...

 

What do mean 'settings', to show a menu or not, depending whether they are logged in. Yes...

 

What do mean 'settings', to show a menu or not, depending whether they are logged in.

 

Otherwise what's the menu structure, is it just a list, is it sets of menus, etc?

 

 

 

[tinker]

how do you store your menu items, how are they named...

how many menus...

how many users do you expect...

do expect to have more menus open than closed, on average...

 

some examples of the menu storage and existing menu creation routine might be helpful...

[nezbo]

i have a mysql table called usersetings the fields are called ::

 

homeSettings

adminSetings

loginSettings

logJobSettings

shiftRepSettings

shiftRotaSettings

 

there are 6 menus.

 

there are over 400 staff using the system at the moment, it is only a staff based thing.

 

i may have more menus, as the system developes more...

 

i have not got any meny storage just a validation function that i have made using php.

 

hope this is usefull?

 

Cheers

[tinker]

so an initial development concept is this:

 

- each menu is numbered

- you could have another field in usersetings, say called menu_memory

- in menu_memory is a delimited list of menu numbers (either indicating open or closed)

 

How to track menu state?

----------------------------------------------------

 

1)

Menu states would have to be sent with each page change / update etc. This would probably require JS no matter what, for instance if you were to link from within the page, it too would need to send this intel. Therefore you'd need a new link handler which was sent the link, then the function would harvest the states of the menus, put the in a GET statement and append to the link. This would probably in the correct format for direct saving.

 

2)

You could set up some kind of ajax feedback on your menu, but you might experience some  synchronisation problems (or not). Basically every time a menu state is changed a message is sent back and the db field updated. However if the messages were received out of order a menu could be set to closed when it was actually set to open. The other concern is this adds to the network traffic, because if you've got someone who's not sure where to look for something they open and close like a scoppy diddle, or some people even like to open and close menus as a form of fiddling when bored.

 

 

Menu generation

------------------------------------------------------

When creating menu, the menu_memory field is read, then split on the delimiter. As iterate through the creation, need to use say in_array, if true then set to open.

 

 

P.S. I hope have you lot's of fun doing this... it'll be something to be proud of when finished...

 

You never know I or someone else might think of a simpler solution, but it needs to be along these lines just because of the mechanics. But the other thing to be aware of, is unless you use the ajax method (I personally wouldn't), the menu will only reflect the last state, if you know I mean!

[tinker]

a question for everybody... ever considered donating blood?

[tinker]

see cookie solution suggestion here

[nezbo]

i am not to sure i i want to use cookies because the setings will not be the same when they use a diferent pc.

 

cheers for that but how do i post the info from the java script to the database ? or where do i do the update? then How do i get the info back...

 

Cheers for your help.

 

 

this code is one of the menus::

<?php	
echo "<table cellspacing=1  class=\"modual\"><tr class=\"tHedder\" onclick=\"hide_linksy('ShiftREpMod')\"><td>";
echo "<div align=\"left\"><strong><span class=main>Shift Report</span></strong></div></td></tr><tr class=\"modual\"><td><table id='ShiftRepMod' style=\"visibility:visible;position:relative;\"><tr><td>";

	echo "<span class=small><strong><a href=shiftReport.php><span class=main>Shift Entry</span></a></strong><br></span>";
	echo "<span class=small><strong><a href=viewShiftReport.php><span class=main>View Shift Report Day</span></a></strong><br></span>";
	echo "<span class=small><strong><a href=viewShiftReportAll.php><span class=main>View Shift Report All</span></a></strong><br></span>";

echo "</td></tr></table></td></tr></table>";
?>

 

This is the functions ::

<!-- Java script Functions -->
<script language="javascript">
function GetCookie(sName)
{
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }
  return null;
}
function hide_linksy(lname)
{
var e = document.getElementById(lname).style;
if(e.visibility == 'hidden')
{
	e.visibility = 'visible';
	e.position = 'relative';
}
else
{
	e.visibility = 'hidden';
	e.position = 'absolute';
}
}
</script>

 

so an initial development concept is this:

 

- each menu is numbered

- you could have another field in usersetings, say called menu_memory

- in menu_memory is a delimited list of menu numbers (either indicating open or closed)

 

How to track menu state?

----------------------------------------------------

 

1)

Menu states would have to be sent with each page change / update etc. This would probably require JS no matter what, for instance if you were to link from within the page, it too would need to send this intel. Therefore you'd need a new link handler which was sent the link, then the function would harvest the states of the menus, put the in a GET statement and append to the link. This would probably in the correct format for direct saving.

 

2)

You could set up some kind of ajax feedback on your menu, but you might experience some  synchronisation problems (or not). Basically every time a menu state is changed a message is sent back and the db field updated. However if the messages were received out of order a menu could be set to closed when it was actually set to open. The other concern is this adds to the network traffic, because if you've got someone who's not sure where to look for something they open and close like a scoppy diddle, or some people even like to open and close menus as a form of fiddling when bored.

 

 

Menu generation

------------------------------------------------------

When creating menu, the menu_memory field is read, then split on the delimiter. As iterate through the creation, need to use say in_array, if true then set to open.

 

 

P.S. I hope have you lot's of fun doing this... it'll be something to be proud of when finished...

 

You never know I or someone else might think of a simpler solution, but it needs to be along these lines just because of the mechanics. But the other thing to be aware of, is unless you use the ajax method (I personally wouldn't), the menu will only reflect the last state, if you know I mean!