1

I have a popup which automatically loads when the page is loaded, it has a timer on the close button which prevents the popup from being closed for 60 seconds. It also has a print button and can be called back up if you press the key 'g'.

Now, I have been trying unsuccessfully to get the amount of time on the timer to vary depending on how many times a user has already seen the popup (i.e. 1st time: 60 seconds. 2nd-4th time: 45 seconds. 5th+ time: 30 seconds.), which is controlled by the counter variable. I have found link1, link2, link3, and link4 which I believe would be a real help to my problem but I have not been able to incorporate them into my code successfully.

Please note the timer does not appear to work in the snippet or the fiddle although it does work in my browser. My code is below:

$(document).ready(function() {
    $(document).keypress(function(e){
        if(e.charCode === 65 || 103) {
             $('#PopUp').css("visibility", "visible"); 
             $('#PopUp').css("opacity", 1); 
        }
    });
    $(function(){
  
       $('#PopUp').css("visibility", "visible"); 
       $('#PopUp').css("opacity", 1); 
  
       });
  
  $( ".close" ).click(function() {

       $('#PopUp').css("visibility", "hidden"); 
       $('#PopUp').css("opacity", 0);
    });
});

        function printDiv()
        {
            var content = document.getElementById('content').innerHTML;
            var win = window.open();
            win.document.write(content);
            win.print(); // JavaScript Print Function
            win.close(); //It will close window after Print.
        }

  var counter = 60; 
  var setMsg = setInterval(function() {
    counter--;
    if(counter >= 60 && counter >= 70) {
  $("#close-message").html("1:" + (counter - 60));
} else if(counter >= 60 && counter < 70) {
  $("#close-message").html("1:0" + (counter - 60));
}  else if(counter >= 10) {
      $("#close-message").html("0:" + counter);
        } else if (counter > 0) {
      $("#close-message").html("0:0" + counter);
    } else {
      $( ".close" ).click(function() {
        $('#PopUp').css("visibility", "hidden"); 
        $('#PopUp').css("opacity", 0);
      });
      $("#timer").remove();
      clearInterval(setMsg);
    }
  }, 1000);
  
});
    .t {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        -webkit-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -ms-transform: scale(0.25);
        z-index: 2;
        position: absolute;
        white-space: pre;
        overflow: visible;
    }

    #t1_1{left:256px;top:35px;letter-spacing:0.1px;}
    #t2_1{left:334px;top:87px;word-spacing:-0.1px;}
    #t3_1{left:210px;top:123px;}
    #t4_1{left:238px;top:123px;word-spacing:-0.3px;}
    #t5_1{left:210px;top:141px;}
    #t6_1{left:210px;top:160px;}
    #t7_1{left:210px;top:179px;}
    #t8_1{left:238px;top:141px;letter-spacing:-0.1px;word-spacing:-0.1px;}
    #t9_1{left:238px;top:160px;word-spacing:-0.1px;}
    #ta_1{left:238px;top:179px;word-spacing:-0.1px;}
    #tb_1{left:343px;top:242px;letter-spacing:-0.1px;}
    #tc_1{left:210px;top:278px;}
    #td_1{left:210px;top:297px;}
    #te_1{left:210px;top:315px;}
    #tf_1{left:210px;top:334px;}
    #tg_1{left:238px;top:278px;word-spacing:-0.1px;}
    #th_1{left:238px;top:297px;word-spacing:-0.1px;}
    #ti_1{left:238px;top:315px;word-spacing:-0.2px;}
    #tj_1{left:238px;top:334px;word-spacing:-0.1px;}
    #tk_1{left:286px;top:393px;word-spacing:-0.1px;}
    #tl_1{left:210px;top:429px;}
    #tm_1{left:210px;top:448px;}
    #tn_1{left:210px;top:466px;}
    #to_1{left:210px;top:485px;}
    #tp_1{left:238px;top:429px;word-spacing:-0.3px;}
    #tq_1{left:238px;top:448px;word-spacing:-0.1px;}
    #tr_1{left:238px;top:466px;word-spacing:-0.1px;}
    #ts_1{left:238px;top:485px;word-spacing:-0.2px;}
    #tt_1{left:326px;top:544px;letter-spacing:-0.1px;}
    #tu_1{left:210px;top:580px;}
    #tv_1{left:210px;top:599px;}
    #tw_1{left:210px;top:618px;}
    #tx_1{left:238px;top:618px;}
    #ty_1{left:210px;top:636px;}
    #tz_1{left:238px;top:636px;}
    #t10_1{left:210px;top:655px;}
    #t11_1{left:238px;top:580px;word-spacing:-0.1px;}
    #t12_1{left:238px;top:599px;word-spacing:-0.2px;}
    #t13_1{left:238px;top:655px;word-spacing:-0.1px;}
    #t14_1{left:264px;top:716px;word-spacing:-0.2px;}
    #t15_1{left:210px;top:752px;}
    #t16_1{left:210px;top:771px;}
    #t17_1{left:210px;top:789px;}
    #t18_1{left:210px;top:808px;}
    #t19_1{left:238px;top:752px;word-spacing:-0.1px;}
    #t1a_1{left:238px;top:771px;word-spacing:-0.1px;}
    #t1b_1{left:238px;top:789px;word-spacing:-0.2px;}
    #t1c_1{left:238px;top:808px;word-spacing:-0.1px;}

    .s1_1{
        FONT-SIZE: 85.4px;
        FONT-FAMILY: Arial;
        color: rgb(0,0,0);
        FONT-WEIGHT: bold;
    }

    .s2_1{
        FONT-SIZE: 61.2px;
        FONT-FAMILY: Arial;
        color: rgb(0,0,0);
        FONT-WEIGHT: bold;
    }

    .s3_1{
        FONT-SIZE: 61.2px;
        FONT-FAMILY: SymbolMT_1z5;
        color: rgb(0,0,0);
    }

    .s4_1{
        FONT-SIZE: 61.2px;
        FONT-FAMILY: Arial;
        color: rgb(0,0,0);
    }

    div {
      padding-top: 10px;
    }

      .button {
        font-size: 1em;
        padding: 10px;
        color: #fff;
        border: 2px solid orange;
        border-radius: 20px/50px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-out;
      }
      .button:hover {
        background: orange;
      }
      .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 500ms;
        visibility: visible;
        opacity: 1;
        height: 578%;
        width: 117.5%;
      }
      .overlay:target {
        visibility: hidden;
        opacity: 0;
        display:none;
      }
      .PopUp {
        margin: 50px auto;
        padding: 0px;
        background: #fff;
        border-radius: 5px;
        width: 60%;
        position: relative;
        transition: all 5s ease-in-out;
      }
      .PopUp .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      .PopUp .close:hover {
        color: orange;
      }
      .PopUp .content {
        max-height: 117.5%;
        overflow: auto;
      }

.pdf1 {
width: 935px;
height: 1210px;
background-color: white;
-moz-transform: scale(1);
z-index: 0;
border: none;
  }

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-family: "Open Sans",sans-serif;
    font-weight: 700;
    color: #2D2D2D;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}
.Print {
    padding-bottom: 10px;
    margin-top: -5px;   
}

.close-message {
    font-family: "Open Sans",sans-serif;
    font-weight: 700;
    color: black;
    font-size: 0.9rem;
    line-height: 1;
    position: absolute;
    top: 15px;
    left: 9px;
}

.timer {
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="PopUp" class="overlay">
        <div class="PopUp">
 <div class="timer" id="timer"><img src="http://i.imgur.com/87XaOWA.png"><p class="close-message" id="close-message"></p></div>

            <a class="close" href="#">&#10005;</a>
            <div class="content">
<div id="p1" class="p1" style="overflow: hidden; position: relative; width: 885px; height: 878px;">

   <!-- Begin page background -->
<div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<div id="pg1" class="pg1" style="-webkit-user-select: none;"><img src="http://i.imgur.com/vcY42CW.png" id="pdf1" class="pdf1"></img></div>
   <!-- End page background -->


<!-- Begin text definitions (Positioned/styled in CSS) -->
<div id="t1_1" class="t s1_1">Player Selection Criteria Evaluator Cue Card</div>
<div id="t2_1" class="t s2_1">Skating – speed, quickness, technique</div>
<div id="t3_1" class="t s3_1">♦</div>
<div id="t4_1" class="t s4_1">Forward and Backward</div>
<div id="t5_1" class="t s3_1">♦</div>
<div id="t6_1" class="t s3_1">♦</div>
<div id="t7_1" class="t s3_1">♦</div>
<div id="t8_1" class="t s4_1">Turn both directions</div>
<div id="t9_1" class="t s4_1">Stop both directions</div>
<div id="ta_1" class="t s4_1">Are they in a good position for stability and strength</div>
<div id="tb_1" class="t s2_1">Passing – technique, control, vision</div>
<div id="tc_1" class="t s3_1">♦</div>
<div id="td_1" class="t s3_1">♦</div>
<div id="te_1" class="t s3_1">♦</div>
<div id="tf_1" class="t s3_1">♦</div>
<div id="tg_1" class="t s4_1">Forehand and Backhand</div>
<div id="th_1" class="t s4_1">To moving and stationary target</div>
<div id="ti_1" class="t s4_1">Vision – do they take a look and select best option</div>
<div id="tj_1" class="t s4_1">Advanced – board passes, chips, saucer passes</div>
<div id="tk_1" class="t s2_1">Puck Control – technique, open ice, confined space</div>
<div id="tl_1" class="t s3_1">♦</div>
<div id="tm_1" class="t s3_1">♦</div>
<div id="tn_1" class="t s3_1">♦</div>
<div id="to_1" class="t s3_1">♦</div>
<div id="tp_1" class="t s4_1">Open carry with speed</div>
<div id="tq_1" class="t s4_1">Execute dekes and fakes on the 1 on 1</div>
<div id="tr_1" class="t s4_1">Can they handle the puck in traffic and tight space</div>
<div id="ts_1" class="t s4_1">Ability to maintain control while being stick checked</div>
<div id="tt_1" class="t s2_1">Shooting – technique, accuracy, velocity</div>
<div id="tu_1" class="t s3_1">♦</div>
<div id="tv_1" class="t s3_1">♦</div>
<div id="tw_1" class="t s3_1">♦</div>
<div id="tx_1" class="t s4_1">Velocity</div>
<div id="ty_1" class="t s3_1">♦</div>
<div id="tz_1" class="t s4_1">Accuracy</div>
<div id="t10_1" class="t s3_1">♦</div>
<div id="t11_1" class="t s4_1">Forehand and backhand</div>
<div id="t12_1" class="t s4_1">Wrist shot, snap shot, slap shot</div>
<div id="t13_1" class="t s4_1">Shot Selection – do they select the best shot for the opportunity?</div>
<div id="t14_1" class="t s2_1">Game Understanding – Principles of Offence and Defence</div>
<div id="t15_1" class="t s3_1">♦</div>
<div id="t16_1" class="t s3_1">♦</div>
<div id="t17_1" class="t s3_1">♦</div>
<div id="t18_1" class="t s3_1">♦</div>
<div id="t19_1" class="t s4_1">Player understands positional play</div>
<div id="t1a_1" class="t s4_1">Player supports the puck on the defensive and offensive side of puck</div>
<div id="t1b_1" class="t s4_1">Player communicates with teammates</div>
<div id="t1c_1" class="t s4_1">Player has the ability to read and react.</div>
</div>
</div>
<div id="Print" class="Print" align="center">
<button onclick="printDiv()"><img src="http://i.imgur.com/HcXNoMC.png" /></button>
</div>
 </div>
</div>
Community
  • 1
  • 1
ChippeRockTheMurph
  • 455
  • 3
  • 17
  • and the 6th, 7th etc time?... – Roko C. Buljan Apr 26 '17 at 16:41
  • P.S: really just out of curiosity... why you're doing *that thing* - of absolutely positioning - everything? – Roko C. Buljan Apr 26 '17 at 16:43
  • 2
    @RokoC.Buljan If you want to be specific it would be more of something like this: 1st time: 60 seconds. 2nd, 3rd, 4th time: 45 seconds. 5th-9th time: 30 seconds. 10th-14th time: 15 seconds. 15 times+: 5 seconds, but that's unimportant. Also, for the content the absolute positioning is because I have a background image and I needed everything to be positioned correctly. For the 'close' button and timer I just wanted them to be in that specific spot. – ChippeRockTheMurph Apr 26 '17 at 16:47
  • Curly braces and round brackets are out of balance. Not possible to know your full intention with the code in that state. – Roamer-1888 Apr 26 '17 at 16:59
  • @Roamer-1888 I pretty much described what my intention was so I'm not sure how an extra curly brace or round bracket can cause you to become so confused. – ChippeRockTheMurph Apr 26 '17 at 17:02
  • I'm not confused. I'm uncertain. Big difference. – Roamer-1888 Apr 26 '17 at 17:04
  • @Roamer-1888 Uncertain on what? As said previously I practically wrote in text my intentions. – ChippeRockTheMurph Apr 26 '17 at 17:06
  • 1
    your problem is quite simple, use a cookie or local storage to save the counter, update each time you open the modal. But if you can make your jsfiddle working, I could take a look – Dalin Huang Apr 26 '17 at 17:06
  • @DanielH It might not work in JSFiddle or in the snippet because those have limitations on some of JS's functions and were to use my code to create an HTML file you would see that the Timer does work, just not in JSFiddle or the Snippet. – ChippeRockTheMurph Apr 26 '17 at 17:09

1 Answers1

2

You can use localStorage (doesn't expire), sessionStorage (lasts for the session), or cookies (lasts until the expiration date you set or the user deletes them). localStorage and sessionStorage may not be supported in some older browsers.

Here is code using sessionStorage if it's available. If it's not available, it falls back to using cookies. If you want to use localStorage just replace sessionStorage with localStorage.

Replace your var counter = 60; with the following code:

// initialization
var counter = 60;
var timesVisited = 1;
var cookieExpirationDays = 5000;    // don't expire cookies for 5000 days
// test to see if localstorage/sessionStorage is available (localStorage has no expiration date)
if (typeof(Storage) !== "undefined") {
    counter = 60;
    timesVisited = sessionStorage.getItem("timesVisited");
    // first time
    if ((timesVisited == null) || (timesVisited < 1)){
        timesVisited = 1;
        sessionStorage.setItem("timesVisited", timesVisited);
        counter = 60;                            
    }
    // second time
    else if ((timesVisited >= 1) && (timesVisited <= 3)){
        timesVisited++;
        sessionStorage.setItem("timesVisited", timesVisited);
        counter = 45;
    }
    // third time
    else if (timesVisited >= 4){
        timesVisited++;
        sessionStorage.setItem("timesVisited", timesVisited);
        counter = 30;
    }
} 
// No localstorage/sessionStorage. Use cookies 
else {
    timesVisited = getCookie("timesVisited");
    console.log(timesVisited);
    // first time
    if ((timesVisited == "") || (timesVisited < 1)){
        timesVisited = 1;
        setCookie("timesVisited", timesVisited, cookieExpirationDays);
        counter = 60;                            
    }
    // second time
    else if ((timesVisited >= 1) && (timesVisited <= 3)){
        timesVisited++;
        setCookie("timesVisited", timesVisited, cookieExpirationDays);
        counter = 45;
    }
    // third time
    else if (timesVisited >= 4){
        timesVisited++;
        setCookie("timesVisited", timesVisited, cookieExpirationDays);
        counter = 30;
    }   
}
alfredo
  • 835
  • 9
  • 11
  • 1
    If I were to change the `timesVisited` variable to `0` it would still work right? All you would have to do to get the same results is add `1` to everything in the `if/else` statements right? – ChippeRockTheMurph Apr 26 '17 at 19:33
  • @ChippeRockTheMurph Yes. The initialization is there just so you have something in case there is no localStorage/sessionStorage or cookies. – alfredo Apr 26 '17 at 19:38