CODEWITHSUNDEEP
jquery
MG.
MG.

Reputation: 893

create session based cookie, jquery

the following code displays a pop up message on page load and creates a cookie so that when the user returns to the page they will not see the pop up message once. the cookie's lifespan is based on time. i'd like to modify this code so the cookie's life span is based on the user session or one day. any guidance or code snippets would be great. thanks.

link to code demo: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial 

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD> 
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="jquery-latest.pack.js"></SCRIPT>

<SCRIPT>

$(document).ready(function() {  

    //if the cookie hasLaunch is not set, then show the modal window
    if (!readCookie('hasLaunch')) {
        //launch it
        launchWindow('#dialog');        
        //then set the cookie, so next time the modal won't be displaying again.
        createCookie('hasLaunch', 1, 365);
    }

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         


    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height());
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 


}

</SCRIPT>

<STYLE>

body {
    FONT-FAMILY: verdana; FONT-SIZE: 15px
}
A {
    COLOR: #333; TEXT-DECORATION: none
}
A:hover {
    COLOR: #ccc; TEXT-DECORATION: none
}
#mask {
    Z-INDEX: 9000; POSITION: absolute; BACKGROUND-COLOR: #000; DISPLAY: none; TOP: 0px; LEFT: 0px
}
#boxes .window {
    Z-INDEX: 9999; POSITION: fixed; PADDING-BOTTOM: 20px; PADDING-LEFT: 20px; WIDTH: 640px; PADDING-RIGHT: 20px; DISPLAY: none; HEIGHT: 385px; PADDING-TOP: 20px
}
#boxes #dialog {
    PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; WIDTH: 640px; PADDING-RIGHT: 10px; HEIGHT: 385px; PADDING-TOP: 10px
}


.redbox {
    color: #F00; font-weight: bold;
}
.bold {
    font-weight: bold;
}
</STYLE>




<div id=boxes>
  <div id=dialog class=window><span class="redbox"> pop up message <A   
href="#" class="bold"> Ok </a> </div>

<div id=mask>
</div></div>

</html>

Upvotes: 4

Views: 17107

Answers (2)

Sark
Sark

Reputation: 4546

better to use HTML5 session storage function, since cookies may disabled by some users.

you can try like this.

var isFirst = sessionStorage.getItem("FIRSTVISIT");

if(isFirst == null || isFirst == 'undefined') {
   sessionStorage.setItem("FIRSTVISIT", "YES");
   launchWindow('#dialog');
}

Upvotes: 3

Guffa
Guffa

Reputation: 700840

A session cookie is a cookie without an expiration time, so change this:

createCookie('hasLaunch', 1, 365);

to:

createCookie('hasLaunch', 1);

Upvotes: 4

Related Questions