Sticky Note with 24 cookie and also a "never display again" option.

[Jessic4]

1) Script Title: Sticky Note

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...stickynote.htm

3) Describe problem: I'd like: I'd like to change the sessions for each cookie to 7 days instead of 'per browser session" and also display a "Never Show Again" tick box or link so that the popup doesnt constantly annoy the readers of the site.

I found a similar thread where the cookie was extended to 24 hours: http://www.dynamicdrive.com/forums/s...-Read-Addition but dont know how to go about it to 7 days and especially not how to implent the "opt out" as Im still learning . Any help would be much much appreciated thank you.

[jscheuer1]

I'm assuming you're using the current version of the script. That old thread was for an outdated version anyway.

Use this updated version of the current script (right click and 'Save As'):

stickynote.js

With this attached updated script you specify cookie instead of session, and if you like, optional days, example:

var mysticky2=new stickynote({
	content:{divid:'stickynote2', source:'stickydata.txt'},
	pos:['right', 'bottom'],
	showfrequency:'cookie',
	days: 7  //<--no comma following last setting!
})

The keyword session is no longer valid. You can still use 'always' if you like, or an integer for displaying it at random a percentage of the time. But previous cookies, if any would have to be cleared in the browser. If 'cookie' is used and no days are specified it will be a session only cookie. If days are specified, it will persist for that many days.

The attached updated script also allows you to put an opt out checkbox in any stickynote, example:

<div id="stickynote2" class="stickynote">
Opt Out: <input type="checkbox" class="optout" /><br />
Use this <a href="http://tools.dynamicdrive.com/gradient/"><b>Online Gradient Tool</b></a> to painlessly generate a gradient image of 3 types, with instant previewing so you get exactly what you had in mind. <a href="#" onClick="mysticky2.showhidenote('hide');return false">[Hide Box]</a>
</div>

It can go anywhere within the stickynote. The only requirements are that it be a checkbox and that it have a class of optout as shown.

Checking it will opt the user out of that sticky for 10 years or until they delete the cookie, whichever comes first. Unchecking it will revert to whatever the default showfrequency for that sticky is.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Any questions, feel free to ask. But . . .

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Jessic4]

Hi John,

Thanks so much for the assistance in this...your help is invaluable. Could I trouble you for a quick noob questions? my expertise is css and html so javascript is confusing me a bit for now, could you tell me where I have to implement the:

var mysticky2=new stickynote({
	content:{divid:'stickynote2', source:'stickydata.txt'},
	pos:['right', 'bottom'],
	showfrequency:'cookie',
	days: 7  //<--no comma following last setting!
})

piece of code to substitute the sessions for the cookie in the stickynote.js file?

My site isnt entirely up and running yet, but I'll post a url in future reference if I have any other queries. Thanks so much

[jscheuer1]

You don't have to edit stickynote.js at all. I attached the updated script to my previous post. Did you download it? If not, do so and use that.

The code you quote in your post goes in the head of the page. In the instructions on the demo page it replaces (from Step 1):

var mysticky2=new stickynote({
	content:{divid:'stickynote2', source:'stickydata.txt'},
	pos:['right', 'bottom'],
	showfrequency:'always'  //<--no comma following last setting!
})

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Jessic4]

It's working pretty great thanks to all your efforts. One more quick question if it's not being too much of a pest; is there any way to delay the stickynote from appearing, so instead of on page load, delay it 20 seconds?

[jscheuer1]

Sure, use this version (includes the previous update) (right click and 'Save As'):

stickynote.js

Now you can add a delay property. For 20 seconds, do it like so (addition highlighted):

var mysticky2=new stickynote({
	content: {divid:'stickynote2', source:'stickydata.txt'},
	pos: ['right', 'bottom'],
	showfrequency: 'cookie',
	days: 7,
	delay: 20 //<--no comma following last setting!
})

[Jessic4]

Thanks John! you've been really helpful

[Jessic4]

http://bit.ly/S9Ly1d here's the final outcome implemented on my site John. I saw it once and it was a bit off centered so I edited it but even though I set the ShowFrequency to 'always' so I can see it every load to edit it for now, it just wont show up. Hopefully it appears well for the visitors.

[jscheuer1]

Once the cookie is set, you have to use your browser to either remove it or to temporarily turn cookies off. Then you can view it for diagnostics unrelated to the cookie part, layout, etc. Setting it to always after having set a cookie for it is like closing the barn door after the horses have all left.

[Jessic4]

hahaha amusing analogous. Its true though, I got got it to display how I wanted to. A final question (hopefully), if it's not too much bother, is there any way to also make the "hide" function work when somebody clicks outside the Div stickynote. Just incase they dont see the "close" link, I wouldnt want them stuck with the note blocking most of the page.