Logged Out
Create an Account
Login:
Password:

Forgot your password?
Using Cookies

Using Cookies
[Back to Index]
Thread Tags
Primary: [Advanced Layout]
Secondary: None

The Stormreavers site is just about finished, there is only one feature I want missing.

Menus that remember their open/close state. I know that I need to use cookies for this, but I'm not quite sure how to accomplish it. If anyone could point me in the direction of some cookie tutorials or give me some coding tips I would appreciate it. Heres how it works so far:

<div class="menuHead" onclick="toggleMenu('mainMenu')">Menu</div>
<div id="mainMenu" class="hideMenu">


mainMenu is the id that gets passed to the state toggle. That code looks like this:

function toggleMenu(objID) {
var ob = document.getElementById(objID).style;
var status = "";

if (ob.display == 'block') {
ob.display = 'none';
status = 'closed';
} else {
ob.display = 'block';
status = 'open';
}

var today = new Date()
var expires = new Date()
expires.setTime(today.getTime() + 1000*60*60*24)

setCookie(objID, status, expires);
}

function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString();
}


The toggle takes the id name and toggles it's display state. It then sends the id name and the display state to the function that makes the cookie.

It all sort of breaks down from there. I know I need an onload and onunload event in the body tag. I'm not sure how to retrieve all of the cookies or how to save them all between sessions. Again, any help you guys could provide would be awesome.
You could look at the javascript code used on http://apocalypse.dkpsystem.com/news.php . He used some cookies in javascript there, which might help.


--
It's all in the reflexes.
function toggleMenu() {
var ob = document.getElementById('mainMenu').style;
var status = "";

if (ob.style.display == 'block') {
ob.style.display = 'none';
status = 'closed';
} else {
ob.style.display = 'block';
status = 'open';
}

var today = new Date()
var expires = new Date()
expires.setTime(today.getTime() + 1000*60*60*24)
setCookie('mainMenu', status, expires);
}

function setCookie(name, value, expires) {
document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString();
}

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

I highlighted some important changes.

As for the cookie reading: it's a lot to type, so I'll point you to my .JS file. http://apocalypse.dkpsystem.com/settings/apocalypse/files/ActionScript.js

When you click that link it will download it to your computer. All my code is in there. Feel free to use and abuse it, as it isn't anything super extraordinary.

Something to note: My code basically creates a named array of objects that are Menu objects. In your case, if you are specifying the mainMenu by name, you won't need to iterate through an array of Menu names like I do. However, you WILL need to iterate through the cookie "crumbs". Each "crumb" is a name/value pair (i.e. crumb[0]/crumb[1]), so once you find your crumb you are looking for, get its value... do your thing... and break from the iteration.

FYI: The code is quick and dirty. There are some slight adjustments I could make to it to reduce the code size, but frankly, I really don't care to spend the time on it.

Anyway... besides that script, the last thing you need is a Page_Onload() function in your body tag:

<body onload="Page_onLoad()" onunload="toggleMenu()">


If you have any questions, post them here.


[Back to Index]