PDA

View Full Version : Sticky Note with 24 cookie and also a "never display again" option.



Jessic4
09-21-2012, 12:31 PM
1) Script Title: Sticky Note

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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/showthread.php?29947-Sticky-Note-With-Cookie-Write-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. :D

jscheuer1
09-22-2012, 09:34 PM
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'):

4755

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
09-23-2012, 12:24 PM
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
09-23-2012, 12:43 PM
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
09-24-2012, 02:25 AM
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
09-24-2012, 04:10 AM
Sure, use this version (includes the previous update) (right click and 'Save As'):

4754

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
09-24-2012, 05:15 AM
Thanks John! you've been really helpful :)

Jessic4
09-27-2012, 02:31 AM
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
09-27-2012, 03:18 AM
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
09-28-2012, 09:37 AM
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.

jscheuer1
09-28-2012, 03:37 PM
Do you mean click anywhere outside it, or on a specific link or image outside of it?

If you want 'anywhere outside it' add the jQuery(function($) as shown:


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

jQuery(function($){
var thenote;
$('*').bind('click', function(e){
thenote = $('#stickynote2, #stickynote2 *');
if(thenote.index(e.target) > -1){return;}
mysticky2.showhidenote('hide');
});
});

Notice where information (highlighted/colored) in the init for the stickynote must match that in the added code.

If you just want a link or image, add an onclick to it, ex:


<a href="#" onclick="mysticky2.showhidenote('hide'); return false;">Close That Box!</a>

There's another option, the hidebox option:


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

That will hide the box after 20 seconds.

sitemasters
05-24-2013, 03:00 PM
Is there a way of implementing the "never display again", but without a visible checkbox? Could we use a hidden input field for instance and pass a value 1 instead.

I want a sticky note along the top that appears every time until the visitor closes it. Once closed a cookie is set for ten years and the note is never seen again.

jscheuer1
05-24-2013, 03:51 PM
For that, you don't need a checkbox or hidden input. Simply set it up for a ten year cookie:


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

sitemasters
05-24-2013, 04:05 PM
Hi John, no I think you may have read my post wrong.

To reiterate, if you check back to the start of this thread it talks about using a checkbox as an optout

Opt Out: <input type="checkbox" class="optout" /><br />

Can we adapt this for a hidden input field or add an extra option to showfrequency?

jscheuer1
05-25-2013, 04:11 AM
Hmm. You've revived an old thread.

Generally you should start a new thread for a new question. Since you're new, we will let that slide for now.

In the future though, please start your own thread for a question, rather than tack on to an old thread (what you did here) or interrupt a thread, even if it's about the exact same thing.

So, let's see what we've got here. A 10 year cookie on close. I see now how that's a little different than what I answered, but not much. If you follow my advice from my last post, once the user sees the sticky, they will never see it again (for 10 years or until cookies are cleared). That may or may not be better than requiring them to close it in order not to see it again.

If we want to go with the original request though - requiring them actively to close it before setting the 10 year cookie, we can make an unseen opt out checkbox (on page init):


var mysticky=new stickynote({
content:{divid:'stickynote1', source:'inline'},
showfrequency:'always',
hidebox:5,
days: 10 * 365
})



HTML markup:


<div id="stickynote1" class="stickynote"><input style="position:absolute;visibility:hidden" type="checkbox" class="optout" />
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onclick="mysticky.showhidenote('hide');jQuery('#stickynote1 .optout').attr('checked', true).trigger('click'); return false">Hide Box</a>
</div>
</div>





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

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.

Oh, and by the way, I have a version of this script that can, once a user has opted out, present an opt in checkbox elsewhere on the page, which if checked will show the sticky note the next time the page is loaded. This could optionally be combined with showing the note. Let me know if you're interested in that.

sitemasters
05-25-2013, 10:29 AM
I already tried visibility hidden and checked="checked" but that didn't work, clearly I was missing the jQuery in the hide box link, and specifically trigger click.

I only suggested a hidden checkbox because I was clinging on to this thread. A better way would perhaps have a new option showfrequency:'always-until-closed' and have no checkbox at all, hidden or otherwise. I can see now that it would have been better to have opened a new thread and suggested that instead, so I apologise for not having done so.

Actually an always-until-closed is not that much of a strange thing to ask, most UK websites since the introduction of the cookie law last year have a sticky note or bar warning the user that this site uses cookies. The only way to stop the message is to close the box. Very annoying I know, but that seems to be the method sites are using to stay compliant with the law.

But yes for anyone following this thread I can confirm that the above code modifications do work.

jscheuer1
05-25-2013, 01:00 PM
In that case, for the on page init you would not want the hidebox property. And I've since discovered that the days need not be specified either, they're hard coded into the script for optout. So you would have for that part just:


var mysticky=new stickynote({
content:{divid:'stickynote1', source:'inline'},
showfrequency:'always'
})

sitemasters
05-25-2013, 03:59 PM
OK, thank you.

jscheuer1
05-25-2013, 05:09 PM
And just now I see that in jQuery 1.9+, triggering a click on a checkbox changes its checked state. So, if using jQuery greater than 1.8.2, we need to remove the highlighted:


<div id="stickynote1" class="stickynote"><input style="position:absolute;visibility:hidden" type="checkbox" class="optout" />
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onclick="mysticky.showhidenote('hide');jQuery('#stickynote1 .optout').attr('checked', true).trigger('click'); return false">Hide Box</a>
</div>
</div>

or change it to false.

sitemasters
11-13-2013, 01:30 PM
Hi again,

I've been using your script since May with no issues, but recently I was hoping to use the following script that scans and pans an unknown image to fit inside a container and that was where the problems began:-

http://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/

I removed all other js and narrowed it down to yours and the above.

I've setup three test pages on:- http://www.ready-to-use.com/test/

1.html uses your script and works, (a cookie prompt that once clicked will not display again for a year or until you clear your cookies)
2.html uses their script and works
3.html uses both scripts and fails

I've tried it in jsfiddle and it fails when I paste your code saying "93% scanned too many errors"

I don't really know much about js but was hoping if you get five minutes you maybe able to quickly tell me where the conflict is occurring.

jscheuer1
11-16-2013, 05:24 AM
First thing to try is to comment out the noConflict directive in the sticky note script. Using a text only editor like NotePad, add the comment tokens (red):


/* Sticky Note Script v2.0
* Created: Feb 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// Unofficial update Sept. 22nd, 2012 for ability to set persist days of cookie and for optional opt out checkbox.
// See: http://www.dynamicdrive.com/forums/showthread.php?71077-Sticky-Note-with-24-cookie-and-also-a-quot-never-display-again-quot-option
// Later in that same thread Sept. 24rth, 2012 for optional delay before showing the stickybox

//jQuery.noConflict()

function stickynote(setting){
var thisobj=this
this.cssfixedsupport=!document.all || document.all && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //check for CSS fixed support
this.reposevtstring='res

Save and use that version of the script.

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

sitemasters
11-17-2013, 06:20 PM
Thanks for the response John. I've done what you said and I think it is OK now, but is that it? Will I need to redefine the variable now that noConflict has been disabled?

jscheuer1
11-18-2013, 01:23 AM
No. noConflict really doesn't need to be part of the Sticky Note script. It's author put it there just in case some other script library (like MooTools or Prototype) was in use. If all your scripts are either jQuery based and/or regular javascript, you don't need noConflict. In fact, using it in cases like that can, as you've just seen, cause problems.