Using cookies to load colorbox on first page load only_问答_开发者

Using cookies to load colorbox on first page load only

开发者 https://www.devze.com 2023-03-07 08:13 出处：网络

I have tried a reference code from the web to load a particular element only once on page load Here is the sample code

I have tried a reference code from the web to load a particular element only once on page load

Here is the sample code


    <script type="text/javascript">
        $(document).ready(function(){
    $.colorbox({width:"40%", height:"63%", inline:true, href:"#subscribe"});
}); 
</script>
 <script type="text/javascript"> 
  $(document).ready(function(){
             if (document.cookie.indexOf('visited=true') === -1) {
                   var expires = new Date();
                   expires.setDate(expires.getDate() 31);
                   document.cookie = "visited=true;
expires=" expires.toUTCString();
               } 
             </script>

Can someone guide me, whats wrong with this code

Here is the html page where I am editing


<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset=utf-8 />
    <title>Popup Subscription Box</title>
    <style type="text/css">
        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;}
    </style>
    <link media="screen" rel="stylesheet" href="colorbox.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script&gt;
    <script src="../colorbox/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
    $.colorbox({wi开发者_如何学编程dth:"30%", inline:true, href:"#subscribe"});
}); 
</script>
 <script type="text/javascript"> 
  jQuery(document).ready(function(){
             if (document.cookie.indexOf('visited=true') == -1) {
                   var expires = new Date();
                   expires.setDate(expires.getDate() 31);
                   document.cookie = "visited=true;
expires=" expires.toUTCString();
               } 
             </script> 
<style type="text/css">
.example8 { display:none; }
</style>
</head>
<body>
    <h1>Demonstration</h1>

*/ Here is the div id=subscribe info goes */

</body>
</html>

Your cookie set was... sort of horribly broken (for instance, this: "expires.setDate(expires.getDate() 31);" doesn't mean anything. You don't have a an operator (plus) between getDate and 31. You also seemed to have a newline character in there, which would break everything.

Possibly more importantly, you need to actually put your call to colorbox inside of your program flow as well, otherwise, you'd just be calling it every time.

The following should work for you if you dump your other script (the one that starts colorbox immediately), and if you actually have a div with an ID of subscribe on the page:

jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -1) {
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
        $.colorbox({width:"30%", inline:true, href:"#subscribe"});
    }
});

Here's a Fiddle.