Jump to content

Archived

This topic is now archived and is closed to further replies.

SharkBait

Remember Menu State

Recommended Posts

I have this little bit of code:

[code]
function toggleMenu(objID) {
//if(!document.getElementByID) return;
//alert(objID);

var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')? 'none' : 'block';
}
[/code]
This is the sample HTML
[code]
<div class="navcontainer">
Main Menu <span><a href="javascript:void(0);" onclick="toggleMenu('leftMainMenu')">+</a></span>
<div id="leftMainMenu" class="navsub" style="display: none;">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="profile.php">Profile</a></li>
<!-- <li><a href="search.php">Search</a></li> -->
<li><a href="view_notes.php">View Notes</a></li>
<li><a href="javascript:OpenWindow('avgs.php')">Averages</a></li>
<?php
if($USERLEVEL >= $TESTER) {
echo "<li><a href=\"test.php\">Test Units</a></li>\n";
}
?>
<li><a href="prev_counter.php">Check Build Totals</a></li>
<!-- <li><a href="faq.php">Testing Help</a></li> -->
</ul>
</div>
</div>
[/code]

To help me expand and collapse menus.  How would I go about saving the state with a cookie or session so that when the page refreshes the menu blocks don't close?

Share this post


Link to post
Share on other sites
Well to set a cookie with javascript you can use the following method.

[code=php:0]
document.cookie = 'cookiename=cookievalue; path=/';
[/code]

For something like this I would not enter a experation date for the cookie. If you don't then if the user closes the broswer the cookie will no longer be vaild

Now to read a cookie with javascript

[b]edit[/b]

I found a nice javascript cookie tutorial for you. http://www.the-cool-place.co.uk/javascript/tutorial/javascript3.html

Hope this helps,
Tom

Share this post


Link to post
Share on other sites
Thanks for the link.  I can now set and get cookies, I just gota figure out how OnLoad() works now because I believe that is what I need when I load the menus?  To check what state they should be loaded in?

Share this post


Link to post
Share on other sites
I got it working nicely.

I just made an array of my menus IDs and loop through them to insert them into my getCookie function :)

Thanks

Share this post


Link to post
Share on other sites
If someone is interesting in what it looks like these are the scripts:

[code]
function checkMenuState() {

var aMenus = Array("leftMainMenu", "leftSearchMenu", "counterTable", "failureTable");

for (x in aMenus) {
//alert(aMenus[x]);
ob = document.getElementById(aMenus[x]).style;
ob.display = getCookie(aMenus[x]);
}
}
[/code]
[code]
function toggleMenu(objID) {

var ob = document.getElementById(objID).style;
//ob.display = (ob.display == 'block')? 'none' : 'block';
if(ob.display == 'block') {
ob.display = 'none';
} else {
ob.display = 'block';
}
setCookie(objID, ob.display)
}
[/code]

[code]
function setCookie(cookieName, cookieValue, cookieExp) {
// Set the cookie information
if(cookieExp != null) {
// Cookie has a duration / date object is expected
document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/;expires=" + cookieExp.toGMTString();
} else {
document.cookie=cookieName + "=" + escape(cookieValue) +";path=/";
}
}
[/code]
[code]
function getCookie(cookieName) {

var cookieValue;
// Obtain the Cookie information
cookieString = document.cookie

// Get each element in the cookie
cookieArray = cookieString.split(";");

if(cookieString.length > 0) {
// A cookie is present - loop through them
for (x in cookieArray) {
// Split the cookie value into name/value
cookieValues = cookieArray[x].split("=");
// trim any extra whitespaces from the value
cookieValues[0] = trim(cookieValues[0]);

if(cookieName == cookieValues[0]) {
// Found a Match - get the value
cookieValue = cookieValues[1];
}
}
// return the value of the cookie
return unescape(cookieValue);
} else {
return null;
}
}
[/code]

Now in the HTML  in my header page I use:
[code]
<body OnLoad="javascript:checkMenuState();">
[/code]
To ensure the menu's load their state correctly on page-refreshes etc

In the menu sections I just do a simple OnClick call to toggleMenu():
[code]
<a href="javascript:void(0);" OnClick="toggleMenu('failureTable')">+</a>
[/code]

And voila, it works nicely :)

Share this post


Link to post
Share on other sites
I havent changed the code but IE isnt liking it any more and doesn't remember the menu's state.

Firefox handles it fine but in the Javascript Console I get this error:

Error in parsing value for property 'display'. Declaration dropped.  Line: 0

Well nothing on line 0 so I am not sure where to look.

Share this post


Link to post
Share on other sites
if you are inserting onload in the body make sure it's lowercase, or it doesn't validate
<body onload="whatever">
if you do
<body Onload="whever">
you get validation issue's

Share this post


Link to post
Share on other sites
[quote author=SharkBait link=topic=111699.msg458204#msg458204 date=1161889685]
I havent changed the code but IE isnt liking it any more and doesn't remember the menu's state.

Firefox handles it fine but in the Javascript Console I get this error:

Error in parsing value for property 'display'. Declaration dropped.  Line: 0

Well nothing on line 0 so I am not sure where to look.
[/quote]

Isn't the correct syntax element.style.display?  That might be the cause of your problem.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.