adx Posted February 16, 2009 Share Posted February 16, 2009 Well, I've got a small problem on my hands. I have a few list containers that can be maximized/minimized onClick with this function.. function toggleList(id) { document.getElementById(id).style.display = ( document.getElementById(id).style.display == 'none')?'block':'none';} The thing is that I want the display preference to be saved to a cookie when a user clicks the event. The main problem is that when you Google JavaScript cookies, all you really get is the how to prompt for a username and save it, which isn't much help to me. I did however find a script that would make a box disappear and save it to a cookie, but it was impossible to make it reappear! Does anyone know the exact cookie code for something like this? I really hate asking questions, so please be merciless. Thanks! Quote Link to comment Share on other sites More sharing options...
rhodesa Posted February 16, 2009 Share Posted February 16, 2009 Here are functions on how to set/get cookies: http://www.w3schools.com/JS/js_cookies.asp The next step is to add an onload script, that checks for the cookies and sets the boxes according to what the cookie is...here is some info on that: http://www.w3schools.com/jsref/jsref_onload.asp Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 16, 2009 Share Posted February 16, 2009 function toggleList(id) { var obj = document.getElementById(id); var displayValue = (obj.style.display!='block')?'block':'none'; obj.style.display = displayValue; setCookie(id, displayValue); return; } window.onload = function() { //Create a line for each object you need to set the toggle //value for on load of the page. Set the ID value accordingly toggleList('object_1_ID'); toggleList('object_2_ID'); toggleList('object_3_ID'); return; } function setCookie(name, value, expiredays) { if (expiredays==null) { expiredays=0; } var expireDate = new Date(); expireDate.setDate(expireDate.getDate()+expiredays); var cookieVal = name + '=' +escape(value) + ';expires=' + expireDate.toGMTString(); document.cookie = cookieVal; return; } function getCookie(c_name) { if (document.cookie.length>0) { c_start = document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexOf(";", c_start); if (c_end==-1) { c_end = document.cookie.length; } return unescape(document.cookie.substring(c_start,c_end)); } } return false; } Quote Link to comment Share on other sites More sharing options...
adx Posted February 16, 2009 Author Share Posted February 16, 2009 Well, it looks good, and I'm sure you know what you're doing. But it still doesn't create a cookie or save anything. Could you maybe explain further? Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 16, 2009 Share Posted February 16, 2009 Ah, yes. I tried to write that against your code, but didn't have the content to test it properly. Here's a complete working page. Note that the items will default to be displayed and then will disappear when the JavaScript runs on load. Looks kind of funny, so you might want to have them default the display to 'none' and only display if appropriate <html> <head> <script type="text/javascript"> function toggleList(id, displayValue) { var obj = document.getElementById(id); if(!displayValue) { var displayValue = (obj.style.display!='none')?'none':'block'; } obj.style.display = displayValue; setCookie(id, displayValue, 30); //Set expiration in days return; } window.onload = function() { //Create a line for each object you need to set the toggle //value for on load of the page. Set the ID value accordingly toggleList('div1', getCookie('div1')); toggleList('div2', getCookie('div2')); toggleList('div3', getCookie('div3')); return; } function setCookie(name, value, expiredays) { if (expiredays==null) { expiredays=0; } var expireDate = new Date(); expireDate.setDate(expireDate.getDate()+expiredays); var cookieVal = name + '=' +escape(value) + ';expires=' + expireDate.toGMTString(); document.cookie = cookieVal; return; } function getCookie(searchName) { if (document.cookie.length>0) { var nameValuePair, cookieName, cookieValue var pairs = document.cookie.split(';'); for(var i=0; i<pairs.length; i++) { nameValuePair = pairs[i].split('='); cookieName = nameValuePair[0].replace(/^\s+|\s+$/g,''); cookieValue = nameValuePair[1].replace(/^\s+|\s+$/g,''); if(cookieName == searchName) { return cookieValue; } } } return false; } </script> </head> <body> <button onclick="toggleList('div1');">Taggle Div 1</button><br> <div id="div1">Content for div 1</div> <br><br> <button onclick="toggleList('div2');">Taggle Div 2</button><br> <div id="div2">Content for div 2</div> <br><br> <button onclick="toggleList('div3');">Taggle Div 3</button><br> <div id="div3">Content for div 3</div> <br><br> </body> </html> Quote Link to comment Share on other sites More sharing options...
adx Posted February 16, 2009 Author Share Posted February 16, 2009 Ah, you really are a guru Thanks! Quote Link to comment Share on other sites More sharing options...
k_2_j Posted September 17, 2009 Share Posted September 17, 2009 I’ve just signed up to this site specifically to say thanks to mjdamato for posting this code. I’ve found there’s a serious lack of help out there on this subject compared to most topics and without finding this post I would have been seriously stuck! Thanks… You’re a life saver! Quote Link to comment Share on other sites More sharing options...
jotgabbi Posted October 19, 2009 Share Posted October 19, 2009 This is really helpful.. one thing I was wondering, and i'm still learning javascript so any help that can be shined, would be useful.. if I've got a drop down, and I want it to list all the div names that are hidden in the cookie... how would I do that? Quote Link to comment Share on other sites More sharing options...
haku Posted October 19, 2009 Share Posted October 19, 2009 You can do it two ways. You can put a div in your site somewhere, and have the javascript output the contents of the cookie into that, or else just use alert() to view the details you want. Quote Link to comment Share on other sites More sharing options...
jotgabbi Posted October 19, 2009 Share Posted October 19, 2009 Maybe I'm going wrong here so am abit confused. I want to display a table, and for the user to have the ability to show or hide columns.. and the ones they choose to hide, then get added to a drop down menu. when they click on that column name, it is then added back onto the table.. I'm unsure of whether having each column as a div for a start or having as a table.. 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.