Only display container for first 4 visits to site

Question

I'm using the following code to display two div containers after 3 minutes:

/* Display After 3 Minutes (180000) */
setTimeout("jQuery('#contact-overlay, #contact-window').show();", 180000);

I only want these div containers to open after 3 minutes on the first 4 visits to the website, after this the div containers should not open for that user again. I assume this could be tracked using the jquery cookies script, but I'm not quite sure how I would get this working.

Answer 1

There are jQuery plugins to manage cookies. Take a look to this:

http://www.electrictoolbox.com/jquery-cookies/

Answer 2

Get the cookie plugin from the link here: http://www.electrictoolbox.com/jquery-cookies/

Open only on the first 4 visits to the site:

   //$(document).ready(function(){
       if(!$.cookie('visits')){
         $.cookie('visits',1, {expires: 30});
       }
       $.cookie('visits', (parseInt($.cookie('visits')) + 1), {expires: 30}) 
           //will expire after 30 days
       var overlayContact = function(){
           if(parseInt($.cookie('visits')) < 5){
               $('#contact-overlay, #contact-window').show();
           }
       };
       setTimeout(overlayContact, 180000);
   //} 
   // Replace all $ with jQuery if you're doubling up 
   // on your javascript frameworks.

Or to open only on the first 4 times the user actually sees the box, move the cookie incrementing line into the body of the overlayContact function, before the if.