How do I create a JavaScript Cookie for a specific JavaScript event within a webpage?

http://www.cookiecentral.com/

and try

document.getElementById('HomePageAnnouncement').click()

Ok... I wasn't sure how to use the line of code you gave me or exactly what part of that website I was supposed to look to for answers. (I had seen a few cookie sites already, but naturally being under the gun with a deadline, I didn't have time to read through all of the sites to try to make sense of what to do, and I had hoped to get some help here from people who have vastly more knowledge than I do about this topic and save myself some much-needed development time. LOL)

That said, I did follow links from the site you suggested and came upon a page about creating a cookie to display a welcome page to new visitors to the site.

I modified the script that I found to have it do essentially the same thing, but calling upon the spry widget. Unfortunately, I'm getting an error in IE with the javascript and it is saying that "AnnouncementPanel" is undefined when that's what I've named the cookie. Please see script below to see if the syntax is ok and if it seems like it can do what I'm hoping.

The second chunk of script is what usually appears in the Dreamweaver page depending on whether the widget is set to be automatically open when someone arrives to the page, or automatically closed.

Thanks so much for your time and help!!!

Sara

<!-- HERE'S THE SCRIPT AS I MODIFIED IT TO CALL UPON THE WIDGET DEPENDING ON THE PRESENCE OF THE COOKIE -->
 
<script type="text/javascript">
<!--
var expdate = new Date();
expdate.setTime(expdate.getTime() +  (60 * 60 * 12)); 
var cookieName = "AnnouncementPanel";        
    if (getCookie(AnnouncementPanel) == null || getCookie(AnnouncementPanel) == "true") {
    setCookie(AnnouncementPanel, "true", expdate);
		var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement");
    }
    else if (getCookie(AnnouncementPanel) == "offtemp") {
    setCookie(AnnouncementPanel, "true", expdate);
	var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement", {	contentIsOpen:false});
    }
//-->
</script>
 
<!-- END OF THIS SCRIPT -->
 
<!-- REGULAR DREAMWEAVER CODE IF WIDGET IS TO BE OPEN BY DEFAULT -->
 
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement");
//-->
</script>
 
<!-- END OF THIS SCRIPT -->
 
<!-- REGULAR DREAMWEAVER CODE IF WIDGET IS TO BE CLOSED BY DEFAULT -->
 
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement", {contentIsOpen:false});
//-->
</script>

Select allOpen in new window

var cookieName = "AnnouncementPanel";         // sets the variable name cookieName to contain the name of the cookie
    if (getCookie(cookieName) == null || getCookie(cookieName) != "true") { // uses the new variable and sets cookie if not set or NOT true
    setCookie(cookieName, "true", expdate);
                var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement");
    }
    else if (getCookie(cookieName) == "offtemp") {
    setCookie(cookieName, "true", expdate);
        var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement", {      contentIsOpen:false});
    }

Ok... I see my mistake as it relates to changing the instances of "cookieName" to the actual name "Announcement Panel."

I've applied these changes, but now I'm getting a new error.

It's at line 355 char 5.

Here's the link: http://www.bonesvillemedia.com/pirateclub-v3/

erm where is the
cookie.js ???

// cookie.js file
var cookieToday = new Date(); 
var expiryDate = new Date(cookieToday.getTime() + (365 * 86400000)); // a year
 
/* Cookie functions originally by Bill Dortsch */
 
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
}

Select allOpen in new window

Wow! Thanks for that! I didn't even see any mention of that on the page where  originally found that script.

And as I mentioned, this is not my area of expertise (at all!)

Let me put this in place and see if this clears up the errors... and then my last question will be:

Does the expiration date at the end of this cookie.js file interfere with the fact that I want the cookie to only last 8 hours? If it does, what syntax would I use in the *.js file to make the cookie expire after 8 hours?

Thanks! You're awesome for helping me!

Wait.... I see the bit at the top about the expiration date, as well... so I know how to change that part. It's the expire at the bottom that I wasn't sure about.

And lastly, is the amount mentioned for the expiryDate measured in seconds? (In other words, could I just change that part to 28800 to equal 8 hours?)

By the way, this is where I found the script I modified and used:

http://www.webreference.com/javascript/961125/part03.html

Milliseconds

Please change your

expDate
to
expiryDate

Ok... that's done... new error now. Line 356.

I'm thinking there's not agreement between the cookie name in index.html and the cookie name in the cookie.js file (which I've placed in the root folder).

I have no idea how to fix that.

I've done away with the whole cookie idea for now. I've just gotten too close to my deadline and I've had to come up with a workaround that doesn't involve cookies.

I'll probably revisit this at some point in the near future, but for now the link I gave you will no longer be applicable as I've removed the script.

Thanks for trying to help me with this.

Sara

Ok, good luck

Ok... I couldn't keep away from working on this. I've created a new index3.html as a test page for this cookie and I think I've solved part of the problem.

Near the top of the code for my page, the Spry Collapsible Panel is called by using the following script. (See below.)

I've moved the script we discussed yesterday into a seperate *.js file and called it in the body of the page instead of having the script entirely written there.

So... my question is, how do I move the two lines of code below out of the actual page and into the CollapsiblePanelCookie.js file that I've created, or if that's not what I should do, what else would you recommend I do to keep this from creating a conflict since it won't work the way it is now?

Here is a link to the live page:

http://www.bonesvillemedia.com/pirateclub-v3/index3.html

Thanks!

Sara

Here are the two lines of code that I'm not sure what to do with:
 
<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
 
==========================================
 
Here is where I call on the script in my page (in place of where the DreamWeaver code was that called on the script): [Note: The menubar bit is the DreamWeaver code for calling on my menubar information. That is where DreamWeaver originally called on my collapsible panel.
 
==========================================
 
<script src="../scripts/CollapsiblePanelCookie.js" type="text/javascript"></script>
 
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/pirateclub-v3/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
 
==========================================
 
I've moved the following script out of the index3.html page and into its own .js file in my scripts folder called CollapsiblePanelCookie.js:
 
==========================================
 
// JavaScript Document
// CollapsiblePanelCookie.js file
var expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() +  (60 * 60 * 8 * 1000)); 
var cookieName = "AnnouncementPanel";         // sets the variable name cookieName to contain the name of the cookie
    if (getCookie(cookieName) == null || getCookie(cookieName) != "true") { // uses the new variable and sets cookie if not set or NOT true
    setCookie(cookieName, "true", expiryDate);
                var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement");
    }
    else if (getCookie(cookieName) == "offtemp") {
    setCookie(cookieName, "true", expiryDate);
        var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("HomePageAnnouncement", {      contentIsOpen:false});
    }
 
==============================================
 
The following is the code you so kindly provided that should be my cookie.js file:
 
==============================================
 
// JavaScript Document
// cookie.js file
var cookieToday = new Date(); 
var expiryDate = new Date(cookieToday.getTime() + (60 * 60 * 8 * 1000)); // 8 hours
 
/* Cookie functions originally by Bill Dortsch */
 
function setCookie (name,value,expires,path,theDomain,secure) { 
   value = escape(value);
   var theCookie = name + "=" + value + 
   ((expires)    ? "; expires=" + expires.toGMTString() : "") + 
   ((path)       ? "; path="    + path   : "") + 
   ((theDomain)  ? "; domain="  + theDomain : "") + 
   ((secure)     ? "; secure"            : ""); 
   document.cookie = theCookie;
} 
 
function getCookie(Name) { 
   var search = Name + "=" 
   if (document.cookie.length > 0) { // if there are any cookies 
      var offset = document.cookie.indexOf(search) 
      if (offset != -1) { // if cookie exists 
         offset += search.length 
         // set index of beginning of value 
         var end = document.cookie.indexOf(";", offset) 
         // set index of end of cookie value 
         if (end == -1) end = document.cookie.length 
         return unescape(document.cookie.substring(offset, end)) 
      } 
   } 
} 
function delCookie(name,path,domain) {
   if (getCookie(name)) document.cookie = name + "=" +
      ((path)   ? ";path="   + path   : "") +
      ((domain) ? ";domain=" + domain : "") +
      ";expires=Thu, 01-Jan-70 00:00:01 GMT";
} 

Select allOpen in new window

But you did not include the cookie.js in the page... (or put the cookie code in the CollapsiblePanelCookie.js )

I would not put the spry code in the js file I think...

Ok... I'm no longer getting a javascript error on the page and that's a good thing. I moved that CollapsiblePanelCookie.js script back into the body of the page. I referenced the cookie.js in the header of the page.

Problem is, now that I'm not getting any errors you'd think everything is working great, but the collapsible panel won't close. Furthermore, the cookie seems to be completely ineffective because everytime I return to the page the collapsible panel seems stuck open.

For much I'd see what you'd charge me to go ahead and help me finish troubleshooting this. I see on your page that you do elance work.

Let me know.

Thanks!

Sara

http://www.bonesvillemedia.com/pirateclub-v3/index3.html

You are a genius! Thank you so much for helping me solve this problem! I can't tell you what a huge relief this is.

The only thing I had to fix from that last bit of script you gave me was from line 4. (See code below.)

Thanks again!

Sara

For code line 4
you wrote:
 
  setCookie(cookieName, "panelOpen", expiryDate);
 
 
I had to fix it to say:
 
  setCookie(cook, "panelOpen", expiryDate);

Select allOpen in new window

THANK YOU! THANK YOU! THANK YOU!!!!

You are welcome!

Sorry about the typo