CODEWITHSUNDEEP
jquery
Ree
Ree

Reputation: 259

popup on page load with cookie not working

I am using this as example to create my pop up on page load. The code is working fine while on local but when I added it on the server its not working. I think some script might be conflicting with it but I am not sure which. I am running on Magento 1.7.

1) here is the link i'm working with.

2) http://jsfiddle.net/5USUu/

Step 1

Add CSS & JS

    <link rel="stylesheet" type="text/css" href="<?php echo $this->getJSUrl('pop/colorbox.css'); ?>" media="screen"/>
<link media="screen" rel="stylesheet" target="_blank" href="<?php echo $this->getJSUrl('pop/popup.css'); ?>" />
<script language="javascript" src="<?php echo $this->getJSUrl('pop/colorbox.js'); ?>"></script>

Step 2

Add function before </head>

    <script>
$(document).ready(function (){ 
   // load the overlay
    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:"580px", inline:true, href:"#subscribe_popup"});
    }

    $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

});

Step 3

add HTML at the footer

<p>The subscription popup will activate if no cookie is set. Once the popup is closed a cookie is set which expires every 15 days. You can manually activate the subscription box below.</p>

<a href="#" class="open_popup">Click here to open the popup</a>

<!-- This contains the hidden content for inline calls for the subscribe box -->
<div style='display:none'>
<div id='subscribe_popup' style='padding:10px;'>
<h2 class="box-title">Never miss an update from Papermashup</h2>
<h3 class="box-tagline">Get notified about the latest tutorials and downloads.</h3>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
  <!-- BEGIN .box-side -->

  <!-- BEGIN #subs-container -->
 </div>
 </div>
</div>
<!-- END subscribe popup-->

Upvotes: 1

Views: 1914

Answers (1)

Anil
Anil

Reputation: 21910

Here is a working example: http://jsfiddle.net/5USUu/6/

You have to include jQuery and then the [colorBox.js][1] plugin you are using, once included everything should work. I see a pop up with the text Never miss an update from Papermashup in colorBox.

I also changed: 

$("document") => $(document)

View the JSFiddle.

The fact it works locally and not on your server, means the file is probably not on your server (or transferred with a wrong mime type), check your Console for errors to debug.

Also, I see looking at your source code (http://miirue.com/m1/) that you are include the jquery library twice, also I see your including loads of other libraries, so you would probably need to use jQuerys noConflict method.

I see so many issues with your code, im not suprised its not working. Debug using your console, make sure html is all valid, and all resources and transferred with the correct mime type and actually exist.

Nothing seems to be wrong with your code (apart from $("document") => $(document) ), if your javascript breaks somewhere, it will break everything, so make sure your syntax is valid and correct.

Upvotes: 1

Related Questions