SharkBait Posted October 16, 2006 Share Posted October 16, 2006 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? Quote Link to comment Share on other sites More sharing options...
tomfmason Posted October 17, 2006 Share Posted October 17, 2006 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 vaildNow 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.htmlHope this helps,Tom Quote Link to comment Share on other sites More sharing options...
SharkBait Posted October 17, 2006 Author Share Posted October 17, 2006 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? Quote Link to comment Share on other sites More sharing options...
SharkBait Posted October 17, 2006 Author Share Posted October 17, 2006 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 Quote Link to comment Share on other sites More sharing options...
SharkBait Posted October 17, 2006 Author Share Posted October 17, 2006 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 etcIn 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 :) Quote Link to comment Share on other sites More sharing options...
SharkBait Posted October 26, 2006 Author Share Posted October 26, 2006 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: 0Well nothing on line 0 so I am not sure where to look. Quote Link to comment Share on other sites More sharing options...
Ninjakreborn Posted October 26, 2006 Share Posted October 26, 2006 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 Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted October 26, 2006 Share Posted October 26, 2006 [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: 0Well 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.