Outbreaker Posted April 25, 2020 Share Posted April 25, 2020 (edited) H, After google for hours for a JavaScript that would hide a div for X(12) Hours if clicked X(2) Times. I was only able to find a jQuery script that would do this. Could someone help me to convert this jQuery script below in to a vanilla JavaScript? http://jsfiddle.net/mbdu6vtg/ $(document).ready(function() { // If the 'hide cookie is not set we show the message if (!readCookie('hide')) { $('#popupDiv').show(); } // Add the event that closes the popup and sets the cookie that tells us to // not show it again until one day has passed. $('#close').click(function() { $('#popupDiv').hide(); createCookie('hide', true, 1) return false; }); }); // --- // And some generic cookie logic // --- 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 eraseCookie(name) { createCookie(name,"",-1); } Edited April 26, 2020 by Outbreaker Link to comment Share on other sites More sharing options...
EdSon Posted April 27, 2020 Share Posted April 27, 2020 Check: document.addEventListener('DOMContentLoaded', function() { // If the 'hide cookie is not set we show the message if (!readCookie('hide')) { document.getElementById('popupDiv').style.display = 'block'; } // Add the event that closes the popup and sets the cookie that tells us to // not show it again until one day has passed. document.getElementById('close').addEventListener('click', function() { document.getElementById('popupDiv').style.display = 'none'; createCookie('hide', true, 1) return false; }); }); // --- // And some generic cookie logic // --- function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*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 eraseCookie(name) { createCookie(name,"",-1); } Where: $(document).ready(function() { -or- $(function() { -by- document.addEventListener('DOMContentLoaded', function() { -or- window.addEventListener('load', function() { -or- window.onload = function() { $('#popupDiv').show(); -by- document.getElementById('popupDiv').style.display = 'block'; -or- document.querySelector('#popupDiv').style.display = 'block'; $('#close').click(function() { -by- document.getElementById('close').addEventListener('click', function() { -or- document.getElementById('close').onclick = function() { 1 Link to comment Share on other sites More sharing options...
Outbreaker Posted April 27, 2020 Author Share Posted April 27, 2020 Thanks. That helped me a lot. Link to comment Share on other sites More sharing options...
Outbreaker Posted April 27, 2020 Author Share Posted April 27, 2020 (edited) HI, Do you know how to tweak the script so it will only hide the div if it gets clicked 3 times in 24 hours? I also changed the code so that it would work with CSS Style "class" instead of "ID". Is below the proper JavaScript code to do that? FROM: document.getElementById('popupDiv'). TO: document.getElementsByClassName('popupDiv')[0]. Edited April 27, 2020 by Outbreaker Link to comment Share on other sites More sharing options...
EdSon Posted April 27, 2020 Share Posted April 27, 2020 First clarify that JavaScript on the client side is completely manipulable by that client Check: <style> .msg { border: solid; background: yellow; padding: 1em; } </style> <div class="msg">Hello</div> <div class="msg">vicious</div> <div class="msg">world!</div> <script> var msgs = document.getElementsByClassName('msg'); var cookie = document.cookie; var clks = 0; var rx = new RegExp('(clicks=)(\\d)+'); // Check if exists cookie and get clicks count if ( cookie.match(rx) ) { clks = cookie.match(rx)[2]; } else { createCookie('clicks', 0, 1); } // If click counts >= 3 hide msgs elements if ( clks >= 3 ) { for ( let i = 0; i < msgs.length; i++ ) { msgs[i].style.display = 'none'; } } // Set onclick event to msgs elements for ( let i = 0; i < msgs.length; i++ ) { msgs[i].onclick = function() { this.style.display = 'none'; clks++; createCookie('clicks', clks, 1); } } function createCookie(name, value, days) { let cookie = name + '=' + value; if (days) { // max-age is more simple, set time-life in seconds cookie += ';max-age=' + days * 24 * 60 * 60; } document.cookie = cookie; } </script> Using cookie name: clicks with value: count of clicks Using Regular Expresion (RegExp) for matching and extract cookie value Using getElementsByClassName array-like for hide and set click event using keyword: this Using max-age for cookie, it is simpler than calculating expiration datetimes On live: https://jsbin.com/zavogaqexu/edit?html,output 1 Link to comment Share on other sites More sharing options...
Outbreaker Posted April 28, 2020 Author Share Posted April 28, 2020 (edited) Interesting to watch how the script is editing the cookie. One little question i tried to add a short delay to the script to close the div. This should be an easy Task. Well, that's what I thought it would be. for ( let i = 0; i < msgs.length; i++ ) { msgs[i].onclick = function() { setTimeout(function(){ this.style.display = 'none'; clks++; createCookie('clicks', clks, 1); }, 3000); } } Edited April 28, 2020 by Outbreaker Link to comment Share on other sites More sharing options...
EdSon Posted April 28, 2020 Share Posted April 28, 2020 (edited) 'this' from .onclick is lost in the setTimeout function, setTimeout has own 'this', use a variable: // Set onclick event to msgs elements for ( let i = 0; i < msgs.length; i++ ) { msgs[i].onclick = function() { let m = this; setTimeout(function(){ m.style.display = 'none'; clks++; createCookie('clicks', clks, 1); }, 3000); } } Edited April 28, 2020 by EdSon } missing 1 Link to comment Share on other sites More sharing options...
Outbreaker Posted April 28, 2020 Author Share Posted April 28, 2020 (edited) I tried it out, but their is still a bug hiding somewhere that prevents it from running with the Timeout code. I also tried a few other methods from the internet but without luck. Edited April 28, 2020 by Outbreaker Link to comment Share on other sites More sharing options...
EdSon Posted April 28, 2020 Share Posted April 28, 2020 Ups, a } is missing XD. Corrected, view working: https://jsbin.com/johefiqapi/edit?html,output 1 Link to comment Share on other sites More sharing options...
Outbreaker Posted April 28, 2020 Author Share Posted April 28, 2020 Now I'm realizing the missing } too. Thanks for all you help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now