how to read all cookies on onload

fatrat · 01-10-2007, 11:19 PM

hi, id like to set up my website so that lots of the contents is collapsible and the state is remembered using cookies.

here is my testing code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function changeme(id)
{
	state = document.getElementById(id).style.display;
	if (state == 'none')
	{
		state='block';
		document.getElementById(id).style.display = 'block';
	} else
	{
		state='none';
		document.getElementById(id).style.display = 'none';
	}
	createCookie(id, state, 30);
}
function checkcookies()
{
	var x = readCookie('me')
	if (x == 'none') 
	{
			document.getElementById('me').style.display = 'none';
	}
}
</script>
</head>
<body onload="checkcookies()">
<div class="standardheader">
	<h1> <span class="standardheader-mid"><span class="standardheader-left"></span> <span class="standardheader-right"><a href="#" onclick="changeme('me')">+</a></span> &nbsp;Navigation</span></h1>
	<ul class="row1list" id="me">
		<li><a href="{U_CREATEACLAN}">Create a Clan</a></li>
		<li><a href="{U_ADDSCRIM}">Add a Scrim</a></li>
	</ul>
</div>
<div class="standardheader">
	<h1> <span class="standardheader-mid"><span class="standardheader-left"></span> <span class="standardheader-right"><a href="#" onclick="changeme('you')">+</a></span> &nbsp;Navigation</span></h1>
	<ul class="row1list" id="you">
		<li><a href="{U_CREATEACLAN}">Create a Clan</a></li>
		<li><a href="{U_ADDSCRIM}">Add a Scrim</a></li>
	</ul>
</div>
hi
</body>
</html>

atm,

var x = readCookie('me')

onload checks for the state of the 'me' element and sets it.
i need it so the onload it sets the state of all the elements.

is it possible for it the 'readCookie' function to read through all cookies, if the value of the cookie is none or block, then it will set the element display:xxx.

i dont know if that the best way of getting the state of the possible elements on a page.

every page will contain different elements that will be collapsible. so, it needs to be an efficient way of getting the cookies that match the elements for that page. but, the each page is also dynamic, an element that appears one time might not appear the next time.

i guess i could try to manipulate my php to to figure out what elements are being shown before i call the header.php, then put the element list in the onload function and call the cookies that way.

or i could use php to read the cookies and set the states before the page is sent to the the browser.

i am completely new to cookies, so i have no clue what the best way is.

thanks for any help.

fatrat · 01-11-2007, 12:27 AM

i have updated the code a bit to allow for other elements, changing a table to a block doesnt work

Code:

onClick="changeme('cat{catrow.CAT_ID}', 'table')"
onClick="changeme('newspost{newspost_loop.NEWSID}')"

function changeme(id, type)
{
	state = document.getElementById(id).style.display;
	if (state == 'none')
	{
		state='block';
		if(type=='table'){state='table';}
		document.getElementById(id).style.display = state;
	} else

edit: changing display:none to display:table does not make the table appear in ie7 or ie6, but it does in firefox?!?

i will try setting it to block then table, so 2 lines.

edit:

works:

Code:

state='block';
		document.getElementById(id).style.display = state;
		if(type=='table'){document.getElementById(id).style.display = table;}

6arredja · 01-11-2007, 12:43 AM

Take a look at this code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function changeme(id)
{
	state = document.getElementById(id).style.display;
	if (state == 'none')
	{
		state='block';
		document.getElementById(id).style.display = 'block';
	} else
	{
		state='none';
		document.getElementById(id).style.display = 'none';
	}
	createCookie(id, state, 30);
}
function checkcookies()
{
	var x = readCookie('me')
			document.getElementById('me').style.display = x;
	var y = readCookie('you')
			document.getElementById('you').style.display = y;
}
</script>
</head>
<body onload="checkcookies()">
<div class="standardheader">
	<h1> <span class="standardheader-mid"><span class="standardheader-left"></span> <span class="standardheader-right"><a href="#" onclick="changeme('me')">+</a></span> &nbsp;Navigation</span></h1>
	<ul class="row1list" id="me">
		<li><a href="{U_CREATEACLAN}">Create a Clan</a></li>
		<li><a href="{U_ADDSCRIM}">Add a Scrim</a></li>
	</ul>
</div>
<div class="standardheader">
	<h1> <span class="standardheader-mid"><span class="standardheader-left"></span> <span class="standardheader-right"><a href="#" onclick="changeme('you')">+</a></span> &nbsp;Navigation</span></h1>
	<ul class="row1list" id="you">
		<li><a href="{U_CREATEACLAN}">Create a Clan</a></li>
		<li><a href="{U_ADDSCRIM}">Add a Scrim</a></li>
	</ul>
</div>
hi
</body>
</html>

fatrat · 01-11-2007, 12:46 AM

so i would have to use php to output this list?
if im going to use php to output the list of elements on the page, i might as well use it to read the cookie and set the states hadnt i?
like i said, every page will have different elements on it.

http://digitalpatriots.org

Code:

function checkcookies()
{
	var x = readCookie('me')
			document.getElementById('me').style.display = x;
	var y = readCookie('you')
			document.getElementById('you').style.display = y;
}

6arredja · 01-11-2007, 01:16 AM

i have no idea how to use php ill be the first to admit that so can you try explaining exactly how you want this thing to work for me?

you could create array's of element id's for each page

ex:

Code:

var ele_ids = new Array('id_1','id_2');

then have a function that goes through all the ids and uses your readcookie function

Code:

function readele_ids(){
for(i=0;i<ele_ids.length;i++)
{
readCookie(ele_ids[i]);
}
}

p.s. love your site
kind of slow on my browser though but it looks compact and very well done

fatrat · 01-11-2007, 01:21 AM

well, i thought it would go like

Code:

onload="checkcookies()"

function checkcookies()
{
get a list of all cookies;
if cookie value is none { set element(cookiename)=none;}
}

fatrat · 01-11-2007, 01:35 AM

ive used php to create this list:

Code:

<script language="Javascript" type="text/javascript">
	<!--
	function checkcookies ()
	{
	var cookielist=new Array();
	cookielist[1]= navigation;
	cookielist[2]= clansearch;
	cookielist[3]= recentclans;
	cookielist[4]= services;
	cookielist[5]= userbox;
	cookielist[6]= newspost2;
	cookielist[7]= newspost63;
	cookielist[8]= randompic;
	cookielist[9]= mostviewed;
	cookielist[10]= highrated;
	cookielist[11]= mostrecent;
	cookielist[12]= twl0;
	cookielist[13]= twl1;
	cookielist[14]= twl2;
	cookielist[15]= twl3;
	cookielist[16]= twl4;
	for (x=0; x<16; x++) {
	document.getElementById(cookielist[x]).style.display = 'none';
	}
	}
 	-->
	</script>

but it doesnt work....
in the java console it says 'navigation not defined'

edit: changed the code, added " ' " around the vars

Code:

<script language="Javascript" type="text/javascript">
	<!--
	function checkcookies ()
	{
	var cookielist=new Array();
	cookielist[1]= 'navigation';
	cookielist[2]= 'clansearch';
	cookielist[3]= 'recentclans';
	cookielist[4]= 'services';
	cookielist[5]= 'userbox';
	cookielist[6]= 'newspost2';
	cookielist[7]= 'newspost63';
	cookielist[8]= 'randompic';
	cookielist[9]= 'mostviewed';
	cookielist[10]= 'highrated';
	cookielist[11]= 'mostrecent';
	cookielist[12]= 'twl0';
	cookielist[13]= 'twl1';
	cookielist[14]= 'twl2';
	cookielist[15]= 'twl3';
	cookielist[16]= 'twl4';
	for (x=0; x<16; x++) {
	document.getElementById(cookielist[x]).style.display = 'none';
	}
	}
 	-->
	</script>

but still gives an error:
document.getElementById(cookielist[x]) has no properties

6arredja · 01-11-2007, 01:46 AM

first of all i dont know what you do in php but you never start with 1 when your talking arrays atleast not in javascript,c++,c and other important programming languages you dont. you start with 0 such as

Code:

var as=new Array();
as[0]='data';
as[1]='data1';

and so on

fatrat · 01-11-2007, 01:53 AM

in php its default to start at 0, but i think u can start at what u like. at least i think so...

yay, that fixed it, ty.

man, i would be here all night and not figuring that out. I was even look at an example of building an array and had kinda missed that bit.

i read this:

Quote:

quote[0]

I know, zero instead of 1. Arrays just work that way, the first element is always zero and the last element is always one less than what you define as the number of elements.

and promptly forgot it, didnt even realise i hadnt started it 0.

my eyes hurt now.

ty for ur help.

6arredja · 01-11-2007, 01:55 AM

so it works now?

when will i get to see it in action on your site?

fatrat · 01-11-2007, 01:58 AM

it already is..
i do all my testing live atm, not enough users to worry about errors.

tyvm.

only 1 thing with it. while the page is loading, the elements are set to display, until its fully loaded, and then they get hidden.

i might mess with php and css to have them set to hidden before the javascript kicks in.
unless you know how to improve the javascript.

6arredja · 01-11-2007, 02:04 AM

you could by default have all the divs set to hidden

Code:

<div style="display:none">
</div>

since your javascript is going to display the one that should be displayed first anyways

thats not what you want you want the ul's to hide let me do some more poking

Yep it works with ul's so go like this

Code:

<ul id="ids" style="none">
<li>adfaD</li>
</ul>

and if they have never visited the site they will all be hidden
but if they have been to the site before and still have the cookies
then the ones they want hidden should be hidden by default then when
the cookies load the ones they want to view should show up

in theory that is

fatrat · 01-11-2007, 02:29 AM

k, i have gone with using css to control the starting state of display

Code:

<style type="text/css">#navigation { display:none; }#clansbygame { display:none; }#services { display:none; }#newspost2 { display:none; }#newspost63 { display:none; }#scrimlist { display:none; }#cat35 { display:none; }#twl0 { display:none; }#twl1 { display:none; }#twl2 { display:none; }#twl3 { display:none; }#twl4 { display:none; }#xfire { display:none; }#aatracker { display:none; }</style>

the problem this has caused, is when i click on a collapsed box, to open it up, it doesnt open.

Code:

function changeme(id, type)
{
	state = document.getElementById(id).style.display;
	alert(state);
	if (state =='none')
	{
		state='block';
		document.getElementById(id).style.display = state;
		if(type=='table'){document.getElementById(id).style.display = 'table';}
	} else
	{
		state='none';
		document.getElementById(id).style.display = 'none';
	}
	createCookie(id, state, 30);
}

alert(state) is blank

i guess i could set to to state='none' or state=''

i assume this is caused because the default setting is in the external css file, but then i set it again using the cookie info. nvm, coz the state='' works

edit: nope, the state='' caused more probs i think.

6arredja · 01-11-2007, 02:36 AM

no no no no no no all wrong my man

what you have to do is go to each and every single one of those <ul>'s

and add

Code:

style="display:hidden"

to every single one of them little things

6arredja · 01-11-2007, 02:41 AM

forget what i said i should have read your whole post it looks good