javascript - Using cookies to load colorbox on first page load only

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=".6/jquery.min.js"></script&gt;
    <script src="../colorbox/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
    $.colorbox({width:"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>

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./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({width:"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>

Share Improve this question edited Mar 6, 2013 at 15:56 Jack 9,5483 gold badges30 silver badges33 bronze badges asked May 22, 2011 at 9:06 Franklin 1431 gold badge2 silver badges6 bronze badges

1 You have triple '==='. You need to fix this: if (document.cookie.indexOf('visited=true') == -1) and now should work js indexOf. – r.piesnikowski Commented May 22, 2011 at 9:22
Tried. Still not working – Franklin Commented May 22, 2011 at 10:30
Have you used Firebug to check function with document.cookie.indexOf ? Please post your html code. Maybe here we can find reason why code is falling. – r.piesnikowski Commented May 22, 2011 at 10:40

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Using cookies to load colorbox on first page load only - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)