Remove Timer Permanently After Button Has Been Clicked

Question

I have a popup which automatically loads when the page is loaded, it also has a timer on the close button whose time on it varies depending on how many times the popup was viewed by the user. It also has a 'Print' button and the popup can be called back up if you press the key 'g'.

My focus is on the 'Print' button. Currently when I click the 'Print' button it adds the following bit of code:

$("#timer").remove();
clearInterval(setMsg);

However if you were to reload the page the timer would reappear as if the button hadn't been clicked at all, it would be either 5 , 15 , 30 , 45 or 60 seconds depending on how many times you had previously viewed the page. I would like the timer to permanently be removed after the 'Print' button has been clicked. This could probably be achieved by localStorage or a cookie but I am not experienced in those categories.

Please note the timer does not appear to work in the snippet or the fiddle as I believe several of the functions are prevented from working such as document.write . However it will work in my browser when I create an HTML file. 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); }); }); // initialization var counter = 60; var timesVisited = 0; var cookieExpirationDays = 7; // don't expire cookies for a week // test to see if localstorage/sessionStorage is available (localStorage has no expiration date) if (typeof(Storage) !== "undefined") { counter = 60; timesVisited = localStorage.getItem("timesVisited"); // first time if ((timesVisited == 0) || (timesVisited < 1)) { timesVisited = 1; localStorage.setItem("timesVisited", timesVisited); counter = 60; } // second time else if ((timesVisited >= 1) && (timesVisited <= 3)) { timesVisited++; localStorage.setItem("timesVisited", timesVisited); counter = 45; } // third time else if ((timesVisited >= 4) && (timesVisited <= 8)) { timesVisited++; localStorage.setItem("timesVisited", timesVisited); counter = 30; } // fourth time else if ((timesVisited >= 9) && (timesVisited <= 13)) { timesVisited++; localStorage.setItem("timesVisited", timesVisited); counter = 15; } // fifth time else if (timesVisited >= 14) { timesVisited++; localStorage.setItem("timesVisited", timesVisited); counter = 5; } } // 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 <= 8)) { timesVisited++; setCookie("timesVisited", timesVisited, cookieExpirationDays); counter = 30; } // fourth time else if ((timesVisited >= 9) && (timesVisited <= 13)) { timesVisited++; setCookie("timesVisited", timesVisited, cookieExpirationDays); counter = 15; } // fifth time else if (timesVisited >= 14) { timesVisited++; setCookie("timesVisited", timesVisited, cookieExpirationDays); counter = 5; } } 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); }); 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. $( ".close" ).click(function() { $('#PopUp').css("visibility", "hidden"); $('#PopUp').css("opacity", 0); }); $("#timer").remove(); clearInterval(setMsg);s } 

 .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" id="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> 

Answer 1

Here is the jsfiddle code

However if you were to reload the page the timer would reappear as if the button hadn't been clicked at all, This could probably be achieved by localStorage or a cookie but I am not experienced in those categories.

Cookie

Basically, you use a cookie variable as flag to check if the button has been clicked or not. And set it first time to true if it is not set.

function printme() {
  if (!getCookie("printed")) {
    setCookie("printed", true, 1);
    console.log("printed");
  }

}

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  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);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

*Cookie code function used from https://www.w3schools.com/js/js_cookies.asp