Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to read all cookies on onload

    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.

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;}
    Last edited by fatrat; 01-11-2007 at 12:34 AM.

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by 6arredja; 01-11-2007 at 01:21 AM.

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;}
    }

  • #7
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by fatrat; 01-11-2007 at 01:41 AM.

  • #8
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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[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.

  • #10
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so it works now?

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

  • #11
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by 6arredja; 01-11-2007 at 02:11 AM.

  • #13
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by fatrat; 01-11-2007 at 02:36 AM.

  • #14
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #15
    New Coder
    Join Date
    Nov 2004
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    forget what i said i should have read your whole post it looks good


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •