CODEWITHSUNDEEP
jquerycookiesif-statementpopup
Peter Amsterdam
Peter Amsterdam

Reputation: 191

Set a jQuery cookie to show popup only once

I'm an absolute newbie in jQuery. I'm learning, but there is a Christmas message that I need to get up and running within no time.

I've included these in the header of the page:

<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>`

Then follows the message using a jQuery popup. Here it is: 

<script type="text/javascript">
$(document).ready(function() {  
        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.7);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2-220);

        //transition effect
        $(id).fadeIn(2000);     

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     

});

</script>

In the body I've put the message: 

<div style="top: 199.5px; left: 200px; display: none;" id="dialog" class="window">  
XMAS MESSAGE
<a href="#" class="close">Shut this popup.</a>
</div>

So far so good. The next step would be not to bore my returning visitors with the same message over and over (postpone for sixty days would be good enough).

So I want to set a cookie using the jQuery cookie plug-in:

function setCookie() {
    $.cookie('test_status', '1', { path: '/', expires: 60 });
    return false;
}

Which is then found the next time a visitor hits the same page and the Christmas message is not shown till the message expires.

Now if-else statements are the higher kind of jQuery I'm not familiar with just yet. So, could anyone explain it to me?

Upvotes: 19

Views: 69092

Answers (6)

pinkp
pinkp

Reputation: 455

Using js-cookie https://github.com/js-cookie/js-cookie

And Magnific Popup http://dimsemenov.com/plugins/magnific-popup/

And inspired by the other answers I did this which I'm posting as it took me ages to work out so may help someone else. If anyone wants to edit and improve my code feel free. 

 <script type="text/javascript">
function setCookie() {
    Cookies.set('test_status', '1', { expires: 1 })
    return false;
}
</script>

<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
   if (Cookies.get('test_status') != '1') {
         setTimeout(function(){
    $.magnificPopup.open({
     items: {
            src: '#message_popup' //ID OF INLINE ELEMENT
                },
            type:'inline',
      mainClass: 'mfp-zoom-out',
       closeBtnInside: true,
        fixedContentPos: true,
        removalDelay: 500,
            });
     }, 3000);  // equals 50 seconds
    Cookies.set('test_status', '1', { expires: 1}); }
   });
  //]]>
</script>

<script type="text/javascript">
  function closePopup() {
  $.magnificPopup.close();
}
</script>

//MY POP UP
<div id="message_popup" class="white-popup mfp-hide typography">
<button title="CLOSE" type="button" onClick="closePopup();">x</button>
  <div id="pop_inner">
   HELLO WORLD
  </div>
</div>

Upvotes: 0

Amit Naraniwal
Amit Naraniwal

Reputation: 1420

First include the jquery library.

After include the below script for cookies in jquery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Now put the below code into the footer :

$(document).ready(function() {
       // initially popup is hidden:
        $('#stay-in-toch.popup-outer').hide();
        // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
        // The cookie will expire and every 2 days and the dialog will show again.
        if ($.cookie('whenToShowDialog') == null) {
            // Create expiring cookie, 2 days from now:
            $.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });

            // Show dialog
             $('#stay-in-toch.popup-outer').show();       
        }
    });

Upvotes: 3

iamabhishek
iamabhishek

Reputation: 447

I guess what you are looking for is, when a new user visits your Webpage, you show a pop up, but as he surfs through other pages, the pop window should not come up.

Its very easy to achieve through cookies, check this code sample, this will help you

So i am including the code snippet used(you can also follow the below link for the same)

So, the script part is

var expDays = 1; // number of days the cookie should last

var page = "only-popup-once.html";
var windowprops = "width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes";

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
   }
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
var count = GetCookie('count');
if (count == null) {
count=1;
SetCookie('count', count, exp);

window.open(page, "", windowprops);

}
else {
count++;
SetCookie('count', count, exp);
   }
}

And following will be the body of DOM,

<BODY OnLoad="checkCount()">

http://www.jsmadeeasy.com/javascripts/Cookies/Only%20Popup%20Once/index.htm

Upvotes: 0

Mma87
Mma87

Reputation: 71

I had the same problem and I found this solution:

$(document).ready(function () {
    var cookie = document.cookie;
    if (cookie == "") {
        //show popup depending on url
        var url = window.location;
        if (url != "http://localhost/test/jquery-popup.html") {                                    
            setTimeout(function () {
                $.fn.colorbox({ html: '<div style="width:301px;height:194px;"><a href="http://livebook.in/"><img src="res/homer.jpg" style="width:301px;height:194px;" alt="The linked image" /></a></div>', open: true });
            }, 500);   
        }else {
            setTimeout(function () {
                $.fn.colorbox({html:'...', open:true});
            }, 500);
        }

        //set timeout for closing the popup
        setTimeout(function () { $.fn.colorbox.close(); }, 3000);

        //set cookie
        var d = new Date();
        d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); //expire in 30 days
        var expires = "expires=" + d.toGMTString();
        document.cookie = "apparsoYES" + "=" + "YES" + "; " + expires;    
    }
});

this script creates a popup on page load, auto close it, creates a cookie so the popoup is showed only once time and can show different popups depending on the page

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

You can try this

$(document).ready(function() {  
    if ($.cookie('test_status')) {
        return;
    }

    //Rest of your code here
});

Upvotes: 2

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Something of this kind might be of help:

$(document).ready(function(){
   if ($.cookie('test_status') != '1') {
    //show popup here
    $.cookie('test_status', '1', { expires: 60}); }
   });

Upvotes: 16

Related Questions