Question

So I have this script (a countdown timer that closes the ‘#fb-popupdiv’ div, when reaches to zero):

var dom = {};
dom.query = jQuery.noConflict(true);
var time = 11;
window.setInterval(test, 1000);
function test()
{
    time -=1;
    dom.query('#my_timer').html(time); 
    if(time == 0)        
    {
        dom.query('#fb-popupdiv').remove();
    }
} 

Is there any way to combine with this?:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
   else var expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}​

Let me explain. I’m making a likebox popup div, and I want the users who visit my site, see that popup only once in the day (so, they don’t see it again and again visiting my site, several times). So I’m trying to figure a way to combine both scripts, to achieve that.

This is what i’ve got so far:

HTML:

<div id="fb-popupdiv">
<div id="fb-popup">
<h1 class="fb-title">To continue, click "Like" button</h1>
<p style="background:#fff;padding-bottom:20px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBlindGuardianArgentina&amp;width=457&amp;height=263&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23fff&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:457px; height:263px;" allowTransparency="true"></iframe>
<span class="fb-closebutton">Or wait <span id="my_timer"></span> seconds.</span>
</p>
</div>
</div>

CSS:

#popupdiv{position:absolute;display:none;}
#fb-popupdiv{display:block;top:180px;left:278.5px;width:500px;height:355px;position:fixed;background-image:url('http://i.imgur.com/IHT1l.png');margin:0;overflow-y:auto;z-index:999999;text-align:center;border:10px solid rgba(82, 82, 82, .7);border-radius:8px;}
#fb-popup{background-color:#fff;overflow:none;z-index:999999;height:227px;}
.fb-title{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:white !important;padding:5px !important;margin:0 !important;font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
.fb-closebutton{float:right;font:normal 11px/2.5em Arial, sans-serif !important;padding:5px 15px 20px 0;background:#fff;width:97%;text-align:right;color:#000 !important;}
#my-timer{width:400px;background:#fff; margin:0 auto;padding:5px 0px 5px 0px;}

Is it posible, or am I doing it all wrong?

I’m newbie, sorry.

Thanks in advance!

PS: Excuse my poor english.

Answer 1

It sounds like you’re asking more about how you would use your cookie code in order to display something only once a day. Here’s the basic logic for that.

Have this in your CSS so the popup is not visible by default:

#fb-popupdiv {display: none;}

Then, add this javascript:

dom.query(document).ready(function() {
    var val = readCookie("popupAlreadyShown");
    if (!val) {
        createCookie("popupAlreadyShown", 1, 1);
        // use your code here to show the popup here
        dom.query("#fb-popupdiv").show();
    } else {
        // popup was already shown less than 1 day ago
        // because cookie still exists
        // do anything else you might want to do here
    }
});