1

I have FancyBox on a website that pops up when they visit and has some info inside it. I'd like to add some kind of button that the user can click, and it sets a cookie not to show the message for about a month or so.

I'm quite useless when it comes to things like this, so if anyone could walk me though what to do, that would be awesome.

Here's what I have so far. At the bottom I've added what I think could be an anchor for the proposed cookie ("noShow"), but I'm not sure if it would work like it is. I've loaded all the jQuery scripts before this for FancyBox, and after those it loads jquery.cookie.js too. If it matters, I'm using whatever the latest download for FancyBox 2 is.

<script type="text/javascript"> 
function openFancy() { 
setTimeout( function() {$('#autoStart').trigger('click'); },1000);
} 

$(document).ready(function() {
    openFancy();
    $('#autoStart').fancybox();
});
</script>

<!-- This is the popup itself -->
<a id="autoStart" style="display:none" href="#autoFancybox"></a>
 <div style="display: none;">
  <div id="autoFancybox" style="width: 800px">
   <div>
    <!-- My content for the Fancybox is here -->
    <br />
    <p style="font-size:10px" align="right">
    <a id="noShow" href="#noShow">Don't me show this message again</a>
    </p>
   </div>
  </div>
 </div>

Thanks, Liam.

pkExec
  • 1,752
  • 1
  • 20
  • 39
Liam
  • 11
  • 1
  • 2
  • possible duplicate of [Delay pop-up for 10 seconds, only pop up once](http://stackoverflow.com/questions/8298886/delay-pop-up-for-10-seconds-only-pop-up-once) – JFK Dec 12 '12 at 18:56

2 Answers2

6

Apart from your function that launches fancybox, make another that set the cookie's value and expiration time when the button is clicked : 

function dontShow(){
 $.fancybox.close(); // optional
 $.cookie('visited', 'yes', { expires: 30 }); // set value='yes' and expiration in 30 days
}

... then validate the cookie and decide whether to launch fancybor or not :

$(document).ready(function() {
    var visited = $.cookie('visited'); // create cookie 'visited' with no value
    if (visited == 'yes') {
        return false;
    } else {
        openFancy(); // cookie has no value so launch fancybox on page load
    }
  $('#autoStart').fancybox(); // bind fancybox to selector
}); // ready

... now the html of your button

<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>

See working DEMO

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Note that $.cookie requires the jQuery plugin mentioned by @Ma9ic, it's not a native function. – pkExec Aug 20 '14 at 13:58
  • 1
    @pkExec : you are correct. The OP mentioned they are loading `jquery.cookie.js` script before Ma9nic's answer though. I assumed it was understood we needed that jQuery plugin for this answer to work (the proposed demo actually loads the jQuery cookie plugin too) – JFK Aug 20 '14 at 15:58
  • indeed, I totally missed them. Added some formatting for future viewers. – pkExec Aug 20 '14 at 16:15
0

There's a great jQuery plugin for cookie management which you should check out - https://github.com/carhartl/jquery-cookie

When a user hits your site, you can check your cookie to see if they've been there before. If they haven't then display your animation and set the cookie. If they have then don't run the animation.

From a glance at the jquery-cookie docs, you can set a cookie for 7 days like so: $.cookie('visited', 'yes', { expires: 7 }); So your code might look like:

// Make sure DOM has fully loaded before running code
$(function(){
    if( ! $.cookie('visited')){
        // Your code here
    } else {
        $.cookie('visited', 'yes', { expires: 7 });
    }
});
Ma9ic
  • 1,107
  • 4
  • 16
  • 30
  • Hi, thanks for your reply. I'm pretty nooby with this kind of stuff. Would you be able to show me how it would work for the "Don't show this message again" button I'm looking to make, using the code I have shown? Sorry for any troubles. Thanks, Liam. – Liam Dec 12 '12 at 17:08