title: Using cookies to load colorbox on first page load only
body: <p>I have tried a reference code from the web to load a particular element only once on page load</p>
  
  <p>Here is the sample code</p>
  
  <p><pre><code>
      &lt;script type=&quot;text/javascript&quot;&gt;
          $(document).ready(function(){
      $.colorbox({width:&quot;40%&quot;, height:&quot;63%&quot;, inline:true, href:&quot;#subscribe&quot;});
  }); 
  &lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;&gt; 
    $(document).ready(function(){
               if (document.cookie.indexOf(&#39;visited=true&#39;) === -1) {
                     var expires = new Date();
                     expires.setDate(expires.getDate() 31);
                     document.cookie = &quot;visited=true;
  expires=&quot; expires.toUTCString();
                 } 
               &lt;/script&gt; 
  </pre></code></p>
  
  <p>Can someone guide me, whats wrong with this code</p>
  
  <p>Here is the html page where I am editing</p>
  
  <p><pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;Popup Subscription Box&lt;/title&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
          a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
          h2{font-size:13px; margin:15px 0 0 0;}
      &lt;/style&gt;
      &lt;link media=&quot;screen&quot; rel=&quot;stylesheet&quot; href=&quot;colorbox.css&quot; /&gt;
      &lt;script src=&quot;<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js&quot;&gt;&lt;/script&amp;gt" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js&quot;&gt;&lt;/script&amp;gt</a>;
      &lt;script src=&quot;../colorbox/jquery.colorbox-min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          $(document).ready(function(){
      $.colorbox({width:&quot;30%&quot;, inline:true, href:&quot;#subscribe&quot;});
  }); 
  &lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;&gt; 
    jQuery(document).ready(function(){
               if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
                     var expires = new Date();
                     expires.setDate(expires.getDate() 31);
                     document.cookie = &quot;visited=true;
  expires=&quot; expires.toUTCString();
                 } 
               &lt;/script&gt; 
  &lt;style type=&quot;text/css&quot;&gt;
  .example8 { display:none; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Demonstration&lt;/h1&gt;</p>
  
  <p>*/ Here is the div id=subscribe info goes */</p>
  
  <p>&lt;/body&gt;
  &lt;/html&gt;
  </pre></code></p>