I need a simple code to show a popup window once at 2 days per user using cookies. I have no idea to code in javascript, if somebody can help me.
The code that I have for the popup window is:
<script type="text/javascript">
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}
$(document).ready(function () {
setTimeout(function(){
$('#bsadsheadline').fadeIn(500);
}, 30000);
});
</script>
<div id="bsadsheadline">
<div id="bloggerspicesflotads">
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em"></span>
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em;float:right;padding-top:2px;padding-right:115px"><a href="javascript:void(0);" onclick="getValue();">inchide(x)</a></span>
</div>
<div id="bsadsbase">
my code
</div></div>
Thanks in advance.
I need a simple code to show a popup window once at 2 days per user using cookies. I have no idea to code in javascript, if somebody can help me.
The code that I have for the popup window is:
<script type="text/javascript">
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}
$(document).ready(function () {
setTimeout(function(){
$('#bsadsheadline').fadeIn(500);
}, 30000);
});
</script>
<div id="bsadsheadline">
<div id="bloggerspicesflotads">
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em"></span>
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em;float:right;padding-top:2px;padding-right:115px"><a href="javascript:void(0);" onclick="getValue();">inchide(x)</a></span>
</div>
<div id="bsadsbase">
my code
</div></div>
Thanks in advance.
Share Improve this question edited Sep 16, 2015 at 14:54 jv-k 7102 gold badges6 silver badges24 bronze badges asked Sep 16, 2015 at 13:26 ForForceForForce 532 silver badges12 bronze badges 5- java or javascript ?? – Madhawa Priyashantha Commented Sep 16, 2015 at 13:27
- hmmm :) ... as I have no idea about java or javascript , I think the code is written in javascript but don`t know for sure :(. – ForForce Commented Sep 16, 2015 at 13:31
- hmm no your code is written in javascript.and why using cookies ? – Madhawa Priyashantha Commented Sep 16, 2015 at 13:33
- Thank you for telling me that :) ... welll.. because I've seen on some websites that you can do that using cookies, I guess. – ForForce Commented Sep 16, 2015 at 13:35
- Do you have other ideas ?! – ForForce Commented Sep 16, 2015 at 13:41
4 Answers
Reset to default 2my solution works using cookies.
Put this in the <head> of your page, to make sure jQuery, jQuery UI (used for displaying the dialogue), and jQuery Cookie Plugin libraries are loaded:
<script src="//code.jquery./jquery-1.10.2.js"></script>
<script src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
Put this at the bottom of your page just before the </body> tag
$(document).ready(function() {
// Make sure dialog is initially hidden:
$('#dialog').dialog({autoOpen: false});
// Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
// The cookie will expire and every 2 days and the dialog will show again.
if ($.cookie('whenToShowDialog') == null) {
// Create expiring cookie, 2 days from now:
$.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });
// Show dialog
$('#dialog').dialog("open");
}
});
</script>
Put this in the <body> section of your page, and place whatever your want instead of the <p> thing.
<div id="dialog" title="Test dialog">
<p>This dialog will only show every 2 days.</p>
</div>
if you have any problems, post the link or the html code for your page and I'll help you with inserting this code. I've tested it and it works.
Here's the code example in action: https://jsfiddle/d2s1r0mp/1/
Check Out this code...
if(localStorage.last){
if( (localStorage.last - Date.now() ) / (1000*60*60*24*2) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div
document.getElementById('div#popup').style.display = 'block'; //Show the div
localStorage.last = Date.now(); //Reset your timer
}
}
else {
localStorage.last = Date.now();
document.getElementById('div#popup').style.display = 'block'; //Show the div because you haven't ever shown it before.
}For full accuracy you will have to use database to maintain the user id and time of block shown to the user. However, if it is not a very hard and fast rule, you can get approximate results by storing the time in browsers cookie, and show/hide the div based on that.
Adding this code to the head of the page does the job:
<script>
$(document).ready(function() {
// Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
// The cookie will expire and every 2 days and the dialog will show again.
if (jQuery.cookie('whenToShowDialog') == null) {
// Create expiring cookie, 2 days from now:
jQuery.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });
// Show dialog
setTimeout(function(){
$('#bsadsheadline').fadeIn(500);
}, 30000);
}
});
</script>
Thanks to @John Valai for helping me.
The code below opens a window in your browser.
window.open("url");
In terms of opening once every 2 days your best bet is to wrap this in some sort of cron job. No clue why you would be using cookies to open a window.