javascript - Trying to put a timer on colorbox while also placing a cookie & reading it to show only once -

hello , thank anyone's help.

i'm trying title says , i've had success placing cookie browser reads , shows colorbox popup once per browser session. however, when try add timer code seems throw acknowledgement of cookie out.

please take @ page i've knocked show , explain :

http://www.absorbent-spill-kits.co.uk/testing-cookies/cookiepage2.html

if close popup, i've written on page script , trouble i'm having.

this should it(partially tested). question benefit more examples.

//check cookie if(!$.cookie("colorboxshown")){     //if no cookie, set timeout of 3 minutes (1000 milliseconds) * (60 seconds) * (3 minutes)     settimeout(function() {         $.colorbox({ iframe: true, width: "80%", height: "80%", href: "http://www.sitepoint.com" });     },     1000*60*3);      //your expires work too, adds year current date.     var expires = new date();     expires.setfullyear(expires.getfullyear() + 1);     $.cookie('colorboxshown', true, { expires: expires, path: '/' }); } 

edit: expanded question

from understand, want timer popup on whatever page they're visiting.

the first thing you'll want store current time in cookie. so:

    $.cookie('colorboxshown', json.stringify({shown: false, started: new date()}), { expires: expires, path: '/' }); 

this store both time started can calculate time left whether or not has been shown.

then first part need changed deal new cookie format:

var expires = new date(); expires.setfullyear(expires.getfullyear() + 1); var cookie = json.parse($.cookie("colorboxshown")) if(!cookie) {     cookie = json.parse($.cookie('colorboxshown', json.stringify({shown: false, started: new date()}), { expires: expires, path: '/' })); if(!cookie.shown){ 

more lines needed both don't have parse cookie again , don't typeerror.

now need change length of timeout account time in cookie.

var timestart = cookie.started; timestart.setminutes(timestart.getminutes() + 3); var timemil = new date() - timestart; 

...

},     timemil);//1000*60*3); 

the final piece check cookie before showing colorbox, , set cookie after.

settimeout(function() {     //cookie declared. colorboxshown cookie declared don't have check     cookie = json.parse($.cookie("colorboxshown"));     if(!cookie.shown) {         $.colorbox({ iframe: true, width: "80%", height: "80%", href: "http://www.sitepoint.com" });         $.cookie('colorboxshown', json.stringify({shown: true, started: cookie.started}), { expires: expires, path: '/' })     } },     timemil);//1000*60*3); 

there drawbacks approach. if user has multiple tabs open of site, possible, though unlikely, popup show in both tabs.

let me know if have , questions or if can't figure out how code work. have not tested it, logic sound.

edit: complete code:

var minutes = 1; $.cookie.json = true; var expires = new date(); expires.setfullyear(expires.getfullyear() + 1); var cookie = $.cookie("colorboxshown"); if (!cookie) {     $.cookie('colorboxshown', {         shown: false,         started: new date()     }, {         expires: expires,         path: '/'     });     cookie = $.cookie('colorboxshown'); } console.log(cookie.shown); if (!cookie.shown) {     var timestart = new date(cookie.started);     console.log(cookie.started);     timestart.setminutes(timestart.getminutes() + minutes);     var timemil = timestart - new date();     console.log(timemil);     settimeout(function () {         //cookie declared. colorboxshown cookie declared don't have check         cookie = $.cookie("colorboxshown");         if (!cookie.shown) {             $.colorbox({                 iframe: true,                 width: "80%",                 height: "80%",                 href: "http://www.sitepoint.com"             });             $.cookie('colorboxshown', {                 shown: true,                 started: cookie.started             }, {                 expires: expires,                 path: '/'             });         }     },     timemil); //1000*60*3); }