SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting a cookie - should be easy.

    i am working on a script that triggers a blind down or blind up effect
    by clicking on a particular link. it then remembers the status of that
    choice by setting a cookie.

    the technique was taken from here:

    http://www.exit404.com/2005/57/unobt...criptaculous-e...

    here is my rule

    Code:
    'a.tools' : function(el){
                            el.onclick = function(){
                                    if (Element.hasClassName('tool-box', 'invisible')) {
                                            new Effect.BlindDown('tool-box');
                                            Element.removeClassName('tool-box', 'invisible');
                                            setCookie(this.parentNode.id, '', 365);
                                    } else {
                                            new Effect.BlindUp('tool-box');
                                            Element.addClassName('tool-box', 'invisible');
                                            setCookie(this.parentNode.id, 'invisible', 365);
                                    }
                            }
                    }
    the problem is this line

    Code:
    setCookie(this.parentNode.id, '', 365);
    that was taken directly from the article but does not apply to my
    situation. in the article he is applying the effects to the same
    element that is clicked on, so 'this' is used in the function, where as
    i am using 'tool-box', which is the id of the div that is getting
    triggered.

    so when i get the setCookie part, i need to rewrite it so that it
    associates itself with the div 'tool-box instead of 'this'. basically i
    just do not know the proper syntax. i tried...

    Code:
    setCookie('tool-box', 'invisible', 365);
    but that did not seem to work for me.

    any thoughts?

    p.s. i did not include the cookie stuff because i do not think it is
    needed, but if you think it would be helpful, i can included or you can
    find it in the article.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any thoughts?
    Post the setCookie() function.

    but that did not seem to work for me.
    What does that mean? State your expected results and the actual results.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure I understand. I already have the script that writes and reads the cookie. I am just having trouble setting the cookie for 'tool-box' instead of 'this'.

    i need to changes the following, i just do not know the correct syntax.

    Code:
    setCookie(this.parentNode.id, '', 365);

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7stud - the results were that the cookie was NOT set, and the expected results are that it does. I think this is just a syntax issue. I do not know how to write that line correctly.

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is just a syntax issue. I do not know how to write that line correctly.
    this.parentNode.id --> string type which is the id of some element
    'tool-box' --> string type which is the id of some element

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you are saying it should be this?:

    Code:
    setCookie('tool-box', 'invisible', 365);
    If that is correct that there must be something else wrong because that does not work.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there must be something else wrong...
    Yes, I know.

  8. #8
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok... here is all my code.

    Basically what is happening is - a user clicks on a a#tools-link. This shows / hides the div #tool-box and a cookie is set to remember it's status so that when the user goes to another page the #tool-box retains their choice.

    The function hideBoxes is what is messed up. That function is overkill for what I am doing. It was originally designed to keep track of multiple boxes, but I am only keeping track of 1 for now. I do not think I need any of the var kids stuff. I guess I am too much of a noob to figure out how to adapt this to my needs.

    Thanks for your help by the way. I know how frustrating it can be to deal with noobs.

    Code:
    // These are behaviour.js rules
    
    var myrules = {
    	'a#tools-link' : function(el){
    			el.onclick = function(){
    				if (Element.hasClassName('tool-box', 'invisible')) {
    					new Effect.BlindDown('tool-box');
    					Element.removeClassName('tool-box', 'invisible');
    					setCookie('tool-box', '', 365);
    				} else {
    					new Effect.BlindUp('tool-box');
    					Element.addClassName('tool-box', 'invisible');
    					setCookie('tool-box', 'invisible', 365);
    				}
    				return false;
    			}		
    		}
    };
    
    
    // Cookie stuff
    	function hideBoxes() {
    		
    		// Id names of all the "boxes"
    		boxIds = $("tool-box");	
    		
    		for (i = 0; i < boxIds.length; i++) {
    			if (boxIds[i]) {
    				cookieValue = readCookie(boxIds[i].id);
    				if (cookieValue == 'invisible') {
    					var div = boxIds[i].getElementsByTagName('div');
    					Element.addClassName(div[0], 'invisible');
    					var kids = boxIds[i].childNodes;
    					for (j = 1; j < kids.length; j++) {
    						if (kids[j].id) {
    							Element.hide(kids[j]);
    						}
    					}
    				}
    			}		
    		}	
    	}
    	
    	function setCookie(name,value,days) {
    	 if (days) {
    		 var date = new Date();
    		 date.setTime(date.getTime()+(days*24*60*60*1000));
    		 var expires = ";expires="+date.toGMTString();
    	 } else {
    		 expires = "";
    	 }
    	 document.cookie = name+"="+value+expires+";path=/";
    	}
    		
    	function readCookie(name) {
    	 var needle = name + "=";
    	 var cookieArray = document.cookie.split(';');
    	 for(var i=0;i < cookieArray.length;i++) {
    		 var pair = cookieArray[i];
    		 while (pair.charAt(0)==' ') {
    			 pair = pair.substring(1, pair.length);
    		 }
    		 if (pair.indexOf(needle) == 0) {
    			 return pair.substring(needle.length, pair.length);
    		 }
    	 }
    	 return null;
    	}
    	
    	// Register the behaviour rules and load a few functions onload.
    	Behaviour.register(myrules);
    	Behaviour.addLoadEvent(hideBoxes);

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a javascript forum. If you have questions about the Prototype language, I suggest you ask them in a forum dedicated to Prototype.

  10. #10
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My question doesn't have anything to do with Prototype. I am using it for my effects, but that has nothing to do with the setCookie or hideBoxes function. They are completely unrelated as far as code goes.

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following code works fine for me in IE6 and FF1.0.7: it alerts 'invisible'.
    Code:
    function setCookie(name,value,days) {
    	 if (days) {
    		 var date = new Date();
    		 date.setTime(date.getTime()+(days*24*60*60*1000));
    		 var expires = ";expires="+date.toGMTString();
    	 } else {
    		 expires = "";
    	 }
    	 document.cookie = name+"="+value+expires+";path=/";
    	}
    
    function readCookie(name) {
    	 var needle = name + "=";
    	 var cookieArray = document.cookie.split(';');
    	 for(var i=0;i < cookieArray.length;i++) {
    		 var pair = cookieArray[i];
    		 while (pair.charAt(0)==' ') {
    			 pair = pair.substring(1, pair.length);
    		 }
    		 if (pair.indexOf(needle) == 0) {
    			 return pair.substring(needle.length, pair.length);
    		 }
    	 }
    	 return null;
    	}
    
    setCookie('tool-box', 'invisible', 365);
    var val = readCookie('tool-box');
    alert(val);

  12. #12
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said, the problem is with the hideBoxes function. it is not reading the cookie and setting the class to 'invisible' if the cookie is 'invisible'

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The '$' function returns an array if it was passed more than one argument. If it was only passed one argument then the element is returned and not an array. That's probably why hideBoxes is not working. So...
    Code:
      function hideBoxes()
      {
        var box = $("tool-box");
        if (box) {
          cookieValue = readCookie(box.id);
          if (cookieValue == 'invisible') {
            var div = box.getElementsByTagName('div');
            Element.addClassName(div[0], 'invisible');
            var kids = box.childNodes;
            for (j = 1; j < kids.length; j++) {
              if (kids[j].id) {
                Element.hide(kids[j]);
              }
            }
          }
        }
      }


Bookmarks

Posting Permissions

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