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="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<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>
Answer
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.