Display Popup Message on Page Load with Cookie

Question

I'm creating a popup message on my website with this tutorial: LINK

It's supposed to only display/popup, when the user is using IE7 or less, and only once - so I need to use cookies.

The tutorial uses a jQuery plugin called "Reveal" and is activated like so:

<script type="text/javascript">
$(document).ready(function() {
    $('#button').click(function(e) {        // Button which will activate our modal
        $('#modal').reveal({                // The item which will be opened with reveal
            animation: 'fade',              // fade, fadeAndPop, none
            animationspeed: 600,            // how fast animtions are
            closeonbackgroundclick: true,   // if you click background will modal close?
            dismissmodalclass: 'close'      // the class of a button or element that will close an open modal
        });
    return false;
    });
});

The HTML that goes along with this script is written like so:

    <div id="modal">
        <div id="heading">
            Are you sure you want to do that?
        </div>
        <div id="content">
            <p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>
            <a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>
            <a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
        </div>
    </div>

I tried adding the cookie myself to the "Reveal"-plugin , using THIS script, but with no luck:

<script type="text/javascript">
    $(document).ready(function() {
        if ( $.cookie ( 'first_visit' ) !== '0' ){
            $('#modal').reveal({                // The item which will be opened with reveal
                animation: 'fade',              // fade, fadeAndPop, none
                animationspeed: 600,            // how fast animtions are
                closeonbackgroundclick: true,   // if you click background will modal close?
                dismissmodalclass: 'close'      // the class of a button or element that will close an open modal
            });
            $.cookie( 'first_visit' , '0' );
        return false;
        }
    });
</script>

What am I doing wrong? I want this popup message to display on IE7 and below - only on the first time visiting the site.

Answer 1

if you want it to display on IE only use the IE Conditional Tags

<!--[if lt IE 8]>
<script type="text/javascript">
... your code ...
</script>
<![endif]-->

IE Conditional Comment

Also make a habit of testing your variable when debuging

<script type="text/javascript">
    $(document).ready(function() {
        var cookie = $.cookie('first_visit');
        alert(cookie); // this will show you why it is not workin
        ....

Answer 2

You have an error on line 12 in script.js. You are using a method called validationEngine . Are you sure you loaded this, because I don't see it anywhere. You can also try to type $.validationEngine in your console, and it will tell you it is undefined. This will probably stop your javascript execution.

Either make sure you include this validation engine, or don't use it, and get back if the error is still there. From what I can see, your ussage of the cookie plugin is correct. It is also initialized, and I can use it on your site through the console.

EDIT

You are returning false after calling the modalizer initialization. I guess this is because you copied it from code that belongs to a click event on a html anchor ( <a /> ), and it needs to stop the default action from being carried out (going to the link). I don't think it does anything in this case, but returning false on $.ready seems instintively like a pretty bad idea. Get rid of that!