CODEWITHSUNDEEP
javascripthtml
user3749553
user3749553

Reputation: 263

show pop up dialog only first visit via cache

I have never worked with browser caching before and am unable to find a good tutoiral on google. Below I am using the jQuery plugin Lightbox_me "http://buckwilson.me/lightboxme/" to display a pop up window when the page loads. Can anyone direct me to a tutorial to only display something on the users first visit or is it simple enough to show me a demonstration? Can this be done using java-script? 

 <script>
    jQuery(function() {
        function launch() {
             jQuery('#sign_up').lightbox_me({centered: true, onLoad: function() { jQuery('#sign_up').find('input:first').focus()}});
        } 

        jQuery(document).ready(function() {
            jQuery("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {
                jQuery("#sign_up").find("input:first").focus();
            }});                
            e.preventDefault();
        });
    });
</script>


<div id="sign_up" style="display:none;">
   pop up box! 
</div>

My problem is I only want this pop up to display the first time the user visits the page, then cache that so it wont display again when user returns to site.

Upvotes: 1

Views: 8116

Answers (2)

Mirjalal
Mirjalal

Reputation: 57

I think you can solve this problem with cookie. Here is simple cookie sample:

<html>
 <head>
  <script type="text/javascript">
   $(document).ready(function () {
    if ($.cookie("your_cookie_name" != 1))
    {
     $("div").show("show");
     $.cookie("your_cookie_name", "1", {expires: 1});
    }
   });
  </script>
  <style type="text/css"> 
   div { 
        width: 300px; 
        height: 300px; 
        display: none; 
        background-color: red; 
        border: 1px solid #ddd; 
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

But first you must download and include jquery cookie plugin in your HTML document.

Upvotes: 1

felipekm
felipekm

Reputation: 2910

Simply putting this code in all your pages:

<script>
   if (!localStorage['someName']) {
       localStorage['someName'] = 'yes';
       myFunction();
   }
</script>

Just to figure it out, here is a nice explanation about localStorage: http://diveintohtml5.info/storage.html

Upvotes: 4

Related Questions