CODEWITHSUNDEEP
javascriptjquery
Iain Carnegie
Iain Carnegie

Reputation: 21

Pop up box to appear once per site visit

I have a pop up box that appears on my site which was appearing each time the home page was visited or refreshed. I managed to use...

var firstTime = localStorage.getItem("firstTime");
if(! firstTime){

localStorage.setItem("firstTime", true);
}
});

...to get it to appear once only but does anyone know how I get it to appear once per visit to the site (not the page)? As this way it doesn't appear when you go back to the site. Any help would be great! Full code is below...

    <script type="text/javascript">
    $(document).ready(function() {  
    var firstTime = localStorage.getItem("firstTime");

    if(! firstTime){

        var id = '#dialog';

        //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});

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

        //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()/2);
        $(id).css('left', winW/2-$(id).width()/2);

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

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     
           localStorage.setItem("firstTime", true);
    }
    });

</script>

//rest of html content

    <!-- Pop-up window - Subscribe -->
<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
<a href="#" class="close">X</a>
<center><img src="img/pop-up-logo.png" alt=""/><br><br><br>

<a href="subscribe.html" class="btn btn-primary"><strong>Subscribe</strong> </a> <br><br>

    <h2>to receive email updates</h2> </center>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
<!-- Pop-up window - Subscribe End -->

Upvotes: 2

Views: 666

Answers (1)

gurvinder372
gurvinder372

Reputation: 68393

You will have to check the time when last visit on the page happens, generally 30 minutes sessions are common (don't have sufficient data to support this though)

so, set the visit time instead in the localstorage 

localStorage.setItem("visitTime", new Date().getTime() );

and check this value next time, whether it is before 30 min (or 60 min to be safe) or after 30 min (or 60 min)

Updated this fiddle for you. As of now I have set the interval time to 1 min so that you can test it.

var timeIntervalToAssumeNewSiteVisit = 1*60*1000; //in milliseconds
$(document).ready(function() {  

  var currentTime = new Date().getTime();
    var lastVisitTime = parseInt( localStorage.getItem("lastVisitTime") );

    if( isNaN( lastVisitTime ) || ( currentTime - lastVisitTime )  >= timeIntervalToAssumeNewSiteVisit )
      {
        alert( "new visit" );
      }
  else
    {
      alert( "same visit, old session" );
    }
       localStorage.setItem("lastVisitTime", currentTime);

});

Upvotes: 1

Related Questions