Jump to content

Remember Menu State


SharkBait

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?
Link to comment
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
Link to comment
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 :)

Link to comment
Share on other sites

  • 2 weeks later...
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.
Link to comment
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.