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 bine 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 bine 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/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook%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('.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.

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 bine 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 bine 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./plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.%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./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.

• javascript
• jquery
• facebook
• html
• popup

• Thanks for making the edits, Sheikh. I figured it out just now. – user1903782 Commented Dec 14, 2012 at 18:11

3 Answers 3

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
    }
});

Have you considered the jquery.cookie plugin?

if (!$.cookie('daily_popup')) {
    // Code to show modal/popup; e.g. show_modal();
    $.cookie('daily_popup', 1, {expires: 1});
}

See the plugin:

https://github./carhartl/jquery-cookie

You can then do:

$.cookie("test", 1);

To delete:

$.cookie("test", null);

Additionally, to set a timeout of a certain number of days (10 here) on the cookie:

$.cookie("test", 1, { expires : 10 });

If the expires option is omitted, then the cookie bees a session cookie, and is deleted when the browser exits.

To cover all the options:

$.cookie("test", 1, {
   expires : 10,           //expires in 10 days

   path    : '/',          //The value of the path attribute of the cookie 
                           //(default: path of page that created the cookie).

   domain  : 'jquery.',  //The value of the domain attribute of the cookie
                           //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                           //will be set and the cookie transmission will
                           //require a secure protocol (defaults to false).
});