943,920 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Aug 6th, 2009
0

Setting cookie for toggle function

Expand Post »
I would really appreciate some help with this. I have searched and searched the internet but cannot find information on exactly what I am trying to do. I have a javascript toggle function:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function toggle_change() {
  2. var ele = document.getElementById("change_log");
  3. var text = document.getElementById("Toggle_change");
  4. if(ele.style.display == "none") {
  5. ele.style.display = "block";
  6. text.innerHTML = "-";
  7. }
  8. else {
  9. ele.style.display = "none";
  10. text.innerHTML = "+";
  11. }
  12. }

What I am trying to do is set a cookie that will remember if the display status is "none". This is probably something simple but I don't know much about javascript obviously. I've tried a few different approaches but I can never get the script to actually set a cookie. Thanks for your assistance.
Similar Threads
Reputation Points: 12
Solved Threads: 7
Junior Poster
Tekkno is offline Offline
134 posts
since Apr 2009
Aug 6th, 2009
0

Re: Setting cookie for toggle function

Hi,

i'll provide you with some example later.

I just post back when im done to it.

-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 6th, 2009
0

Re: Setting cookie for toggle function

As an answer is promised, I won't butt in. Instead, I'll give some tidbits as reminders to how the web works.

Generally speaking, cookies are sent between the server and the browser by way of HTTP headers. To send a cookie to the server, the browser must form the cookie and place it into the HTTP headers.

Cookies are stored in the DOM for easy access via document.cookie. So your ECMAScript needs to create a cookie in the current document in order for it to be sent to the server when a form is submitted.

Finally, remember that you are working with three different, separate things here: HTTP communication protocol, HTML layout language and ECMAScript programming language. The three are separate, can interact and communicate, but extra effort is often needed for things to 'work'. Oh, I forgot to mention the server side, which requires even more stuff for interaction and communication.

I think once you grok the segregation and separation, it'll be a lot clearer how to do things on the browser. It isn't rocket science, but it can be a chorekeeping track of what you are doing and where you are doing it. But once you get the knack of it, you'll be wondering why it took you so long to learn it.

A good reference book is O'Reilly's Javascript tome by David Flanagan. I'm currently using the 5th edition (printed 8/2006).
Reputation Points: 51
Solved Threads: 35
Posting Whiz in Training
Fest3er is offline Offline
238 posts
since Aug 2007
Aug 7th, 2009
0

Re: Setting cookie for toggle function

Hi Tekkno,

but if you still want to claim things with cookies.

Then here is my demo:
javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="./images/main.css" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>http://www.daniweb.com/</title>
  12. <script type="text/javascript">
  13. // <![CDATA[
  14.  
  15. /******************************
  16.  
  17.  * Developed by DANIuser : essential ~
  18.  * This notice must stay intact for use -
  19.  * http://www.daniweb.com/forums/member383844.html
  20.  
  21. ******************************/
  22.  
  23. var doc = ( document );
  24. var Session = function( name, value, expires, path, domain, secure ) {
  25. var today = new Date();
  26. today.setTime( today.getTime() );
  27. if ( expires ) {
  28. this.expires = ( expires * ( 1000 * 60 * 60 * 24 ));
  29. this.willExpire = new Date( today.getTime() + ( this.expires ));
  30. } else {
  31. this.willExpire = new Date( today.getTime() + ( 365 * 1000 * 60 * 60 * 24 ));
  32. }
  33. this.name = name || "";
  34. this.value = value || "";
  35. this.path = path || "";
  36. this.domain = domain || "";
  37. this.secure = secure || "";
  38. this.getSession = ( function( name ) {
  39. var extract;
  40. var val;
  41. if ( name ) {
  42. try {
  43. val = doc.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  44. extract = ( RegExp.$2 );
  45. } catch( d ) {
  46. val = doc.cookie.indexOf( String( name + "=" ));
  47. if ( val !== -1 ) {
  48. val += ((( val ) + name.length ) + 1 );
  49. var colon = document.cookie.indexOf( ";", val );
  50. (( colon !== -1 ) ? colon = document.cookie.length : colon = "" );
  51. extract = document.cookie.substr( val, colon );
  52. } else {
  53. extract = 0;
  54. }
  55. }
  56. } return (( extract ) ? unescape( extract ) : "" );
  57. } );
  58. this.createSession = ( function( name, value, expires, path, domain, secure ) {
  59. try {
  60. var session = name + "=" + escape( value );
  61. session += "; expires=" + expires.toGMTString();
  62. session += "; path=" + escape( path );
  63. session += "; domain=" + domain;
  64. session += secure;
  65. document.cookie = session;
  66. } catch( e ) {
  67. }
  68. } )( this.name, this.value, this.willExpire, this.path, this.domain, this.secure );
  69. };
  70.  
  71. Session.prototype.destroySession = function( name ) {
  72. this.name = "";
  73. document.cookie = name + "=" + ";path=" + this.path + ";domain=" + this.domain + ";expires=Thu, 01-Jan-1970 00:00:00 GMT";
  74. }; var $ = function( name, value, expires, path, domain, secure ) {
  75. if ( arguments.length >= 2 ) {
  76. new Session( name, value, expires, path, domain, secure );
  77. return;
  78. } else {
  79. return false; } // [ Exit Session ]
  80. }
  81. var displayStatus = 0;
  82. var element = ( function( ids ) {
  83. var ids = (( ids = document.getElementById( ids )) ? ids : ids ) || 0;
  84. return ids;
  85. } );
  86. var toggle_change = ( function( ele ) {
  87. var ele = element( ele ) || element("change_log");
  88. var text = element("Toggle_change");
  89.  
  90. (( ele.style.display === "none" ) ? (( ele.style.display = "block" ) && ( text.innerHTML = "<b>-</b>" )) : (( ele.style.display = "none" ) && ( text.innerHTML = "<b>+</b>" )));
  91.  
  92. $( ele.id, ele.style.display ); // Saving status display in cookie session.
  93. $( text.id, text.innerHTML ) // Saving the content of text element.
  94. } );
  95. onload = ( function( state ) {
  96. var state = state || 0;
  97. return function() {
  98. var statusDisplay;
  99. var elem = element("change_log");
  100. var txt = element("Toggle_change");
  101. if( statusDisplay = state.getSession( elem.id )) {
  102. elem.style.display = statusDisplay;
  103. txt.innerHTML = state.getSession( txt.id );
  104. return;
  105. } return false;
  106. }
  107. } )( new Session() )
  108. // ]]>
  109. </script>
  110. </head>
  111. <body>
  112. <div id="Toggle_change" onclick="toggle_change(); "><b>-</b></div>
  113. <div id="change_log"><h1>JavaScript Live Demo!</h1></div>
  114.  
  115. </body>
  116. </html>

hope it helps...
Last edited by essential; Aug 7th, 2009 at 12:25 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 7th, 2009
0

Re: Setting cookie for toggle function

Hi Fest3er,

sorry I didn't noticed that you had a post. Just like to add in some comment --- that your post is very useful for the other viewers' of daniweb.com.

Especially for those people, who are interested to dig in, in the world of JavaScript.

Regards
-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 7th, 2009
0

Re: Setting cookie for toggle function

Thank you essential, it worked like a charm. And thank you for the info Fest3er, I will have to pick that book up. Javascript is a difficult language to learn with just bits and pieces off the internet. But is all that code really necessary for a simple cookie? No wonder I couldn't figure it out lol. I have a similar javascript which I would like to set a cookie for as well. It does the same thing, but toggles an array instead of a single element. Could I use the same script? I can post it if you like. Thanks again.
Last edited by Tekkno; Aug 7th, 2009 at 1:15 am.
Reputation Points: 12
Solved Threads: 7
Junior Poster
Tekkno is offline Offline
134 posts
since Apr 2009
Aug 7th, 2009
0

Re: Setting cookie for toggle function

Hi Tekkno,

it has some functionality, that you might not need right now, but will be able to help you for future use.

I'l give you the instruction manual, when i get home...
-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 7th, 2009
0

Re: Setting cookie for toggle function

@Tekkno,

that would be very helful if you can post your code.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 7th, 2009
0

Re: Setting cookie for toggle function

Claim this as a normal part of your .js files'

then reference it via <script type="text/javascript" src="./cookie.js"></script> tag.

cookie.js
javascript Syntax (Toggle Plain Text)
  1. /*
  2. ~ INSTRUCTION MANUAL ~
  3.  
  4.  Session - argument & method reference:
  5.  |
  6.  | + Session( argument lists:
  7.   * name : cookie-name ( string ) #required# -
  8.   * value : cookie-value ( string / number ) #required# -
  9.   * expires : cookie-expiration ( specify the number of days before expiration ( number )) #optional# -
  10.   - path : cookie-path ( only documents' on this path will be able to retrieve this cookie ( string )) #optional# -
  11.   - domain : domain-address ( only website in this domain will be able to retrieve the cookie. http://www.yourdomain.com/ ( string )) #optional#
  12.   - secure : secured-access ( indicates the browser to use SSL when sending the cookie to the server. ( string / number ) just keep this empty if you don't want to activate this feature ) #optional# -
  13.   ______________
  14.   USAGE EXAMPLE:
  15.   < =============== >
  16.   #1. var mySession = new Session( "someName", "someValue", 31, "/", "http://domainame.com", 1 );
  17.   < =============== >
  18.  
  19.   | + getSession(
  20.   * name : cookie-name ( use this method if you want to retrieve cookie values' ( string )) #required# )
  21.   ______________
  22.   USAGE EXAMPLE:
  23.   < =============== >
  24.   #1. var mySession = new Session( "someName", "someValue", 31, "/", "http://domainame.com", true );
  25.   #2. alert( mySession.getSession( "someName" )); // Will output "someValue"
  26.   < =============== >
  27.  
  28.   | + destroySession(
  29.   * name : cookie-name ( gives you the ability to delete cookie with your specified name ( string )) #required# )
  30.   ______________
  31.   USAGE EXAMPLE:
  32.   < =============== >
  33.   #1. var mySession = new Session( "someName", "someValue", 31, "/", "http://domainame.com", true );
  34.   #2. alert( mySession.getSession( "someName" )); // Will output "someValue"
  35.   #3. mySession.destroySession( "someName" ); // clears up the value of the cookie( someName ).
  36.   #4. alert( mySession.getSession("someName")); // Will return empty string.
  37.   < =============== >
  38. ----------------------------------------
  39.  More free script at:
  40. - http://www.daniweb.com
  41. ----------------------------------------
  42. */
  43.  
  44. var Session = function( name, value, expires, path, domain, secure ) {
  45. var today = new Date();
  46. today.setTime( today.getTime() );
  47. if ( expires ) {
  48. this.expires = ( expires * ( 1000 * 60 * 60 * 24 ));
  49. this.willExpire = new Date( today.getTime() + ( this.expires ));
  50. } else {
  51. this.willExpire = new Date( today.getTime() + ( 365 * 1000 * 60 * 60 * 24 ));
  52. }
  53. this.name = name || "";
  54. this.value = value || "";
  55. this.path = path || "";
  56. this.domain = domain || "";
  57. this.secure = secure || "";
  58. this.getSession = ( function( name ) {
  59. var extract;
  60. var val;
  61. if ( name ) {
  62. try {
  63. val = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  64. extract = ( RegExp.$2 );
  65. } catch( d ) {
  66. val = document.cookie.indexOf( String( name + "=" ));
  67. if ( val !== -1 ) {
  68. val += ((( val ) + name.length ) + 1 );
  69. var colon = document.cookie.indexOf( ";", val );
  70. (( colon !== -1 ) ? colon = document.cookie.length : colon = "" );
  71. extract = document.cookie.substr( val, colon );
  72. } else {
  73. extract = 0;
  74. }
  75. }
  76. } return (( extract ) ? unescape( extract ) : "" );
  77. } );
  78. this.createSession = ( function( name, value, expires, path, domain, secure ) {
  79. try {
  80. var session = name + "=" + escape( value );
  81. session += "; expires=" + expires.toGMTString();
  82. session += "; path=" + escape( path );
  83. session += "; domain=" + domain;
  84. session += secure;
  85. document.cookie = session;
  86. } catch( e ) {
  87. }
  88. } )( this.name, this.value, this.willExpire, this.path, this.domain, this.secure );
  89. }; Session.prototype.destroySession = function( name ) {
  90. this.name = "";
  91. document.cookie = name + "=" + ";path=" + this.path + ";domain=" + this.domain + ";expires=Thu, 01-Jan-1970 00:00:00 GMT";
  92. };
Last edited by essential; Aug 7th, 2009 at 4:57 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Aug 7th, 2009
0

Re: Setting cookie for toggle function

Thanks for the information so far. Here is the code from my other toggle script:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function toggle(showHideDiv, switchTextDiv) {
  2. var ele = document.getElementById(showHideDiv);
  3. var text = document.getElementById(switchTextDiv);
  4. if(ele.style.display == "none") {
  5. ele.style.display = "block";
  6. text.innerHTML = "-";
  7. }
  8. else {
  9. ele.style.display = "none";
  10. text.innerHTML = "+";
  11. }
  12. }
  13. function toggle2(contentDiv, controlDiv) {
  14. if (contentDiv.constructor == Array) {
  15. for(i=0; i < contentDiv.length; i++) {
  16. toggle(contentDiv[i], controlDiv);
  17. }
  18. }
  19. else {
  20. toggle(contentDiv, controlDiv);
  21. }
  22. }
It is basically the same but uses an array. I like your idea with separating the cookie script, I am just not sure how to make it work or reference it properly. What you have done is just created a session, then the cookie accesses the session?
Reputation Points: 12
Solved Threads: 7
Junior Poster
Tekkno is offline Offline
134 posts
since Apr 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: A little problem I aam haaving wih a drag and drop
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How do you return a multi-demensional array using Prototype Hash





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC