Jump to content


Photo

Remember Menu State


  • Please log in to reply
7 replies to this topic

#1 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 16 October 2006 - 08:52 PM

I have this little bit of code:

function toggleMenu(objID) {
	//if(!document.getElementByID) return;
	//alert(objID);
	
	var ob = document.getElementById(objID).style;
	ob.display = (ob.display == 'block')? 'none' : 'block';
}
This is the sample HTML
<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>

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?

#2 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 17 October 2006 - 12:17 AM

Well to set a cookie with javascript you can use the following method.

document.cookie = 'cookiename=cookievalue; path=/';

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

edit

I found a nice javascript cookie tutorial for you. http://www.the-cool-...avascript3.html

Hope this helps,
Tom

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#3 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 17 October 2006 - 02:37 PM

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?



#4 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 17 October 2006 - 03:06 PM

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

#5 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 17 October 2006 - 03:28 PM

If someone is interesting in what it looks like these are the scripts:

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]);
	}
}
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)
}

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=/";
	}
}
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;
	}
}

Now in the HTML  in my header page I use:
<body OnLoad="javascript:checkMenuState();">
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():
<a href="javascript:void(0);" OnClick="toggleMenu('failureTable')">+</a>

And voila, it works nicely :)



#6 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 26 October 2006 - 07:08 PM

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.

#7 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 26 October 2006 - 08:28 PM

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

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#8 KevinM1

KevinM1
  • Moderators
  • Snarkimus Prime
  • 5,248 posts

Posted 26 October 2006 - 09:14 PM

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.


Isn't the correct syntax element.style.display?  That might be the cause of your problem.
Using 'global' is a sign of doing it wrong




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users