I cant find out what is wrong with my cookie script on this site:
http://lampen.identitest.dk/
If you go to my site, you will find a hidden
<div id="popupDiv">
it does not show because of display: none in css but it should be showing and then if you click on a button it should be hiding in 24 hours.
this is my script:
$(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);
}
I have found the cookie script on
http://jsfiddle.net/FcFW2/1/
and this is tested and works in a default html document with jQuery on.
I hope someone can help me out :)
Best regards Shane
There is a typo in your script tag declaration.
It should be <script type="text/javascript">
Currently it's <script type="type/javascript">
I don't see any errors in your code.
Related
I am trying to only display a pop up on the first page load, but in my current script it only shows the pop up if you refresh the page. The popup should display the first time you come to the page but not again.
<script type="text/javascript">// <![CDATA[
document.addEventListener('DOMContentLoaded', function() {
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.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 '';
}
$(document).ready(function() {
if(getCookie('popup') !== ''){
$('.popup-wrapper').css('display','block');
} else {
setCookie('popup','open',1);
}
$('.popup-close').click(function(){
setCookie('popup','close',1);
$('.popup-wrapper').css('display','none');
});
});
});
// ]]></script>
Any help would be greatly appreciated.
Is there a reason why you are using cookies?? If not you can use localStorage and write something a bit cleaner..
So for example
$(document).ready(function() {
// if localStorage doesnt have the shownPopUp item
if(!localStorage.getItem('shownPopUp')){
$('.popup-wrapper').css('display','block');
}
$('.popup-close').click(function(){
// set the shownPopUp item in localStorage
localStorage.setItem('shownPopUp', true)
$('.popup-wrapper').css('display','none');
});
});
});
No need for the getCookie function
Cookies are more used for server-side functions, where localStorage is better for client-side functions. So what will happen here is your users will never see the popup again unless they delete there localStorage
Just add localStorage.setTtem after showing the popup. And don't forget to make the .popup-wrapper display:none
if(!localStorage.getItem('shownPopUp')){
$('.popup-wrapper').css('display','block');
localStorage.setItem('shownPopUp', true);
}
I'm doing an advert overlay for a website. The advert must be seen by the user 3 times consecutively in 24 hours. 24 hours after the advert was first seen(when the cookie was set) the cycle starts again
I have sorted out the 24 hour cookie expiry but I don't know how to implement the value system. Once the cookie value reaches 3 the advert hides
I'm open to a php solution
Here's the scripts that have been coded so far:
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);
}
<script type="text/javascript">
var days = 1;
var advert = document.getElementById('overlay-stage');
if (readCookie('seenAdvert')) {
advert.className = 'htmlNoPages hidden';
} else {
advert.className = 'htmlNoPages show';
createCookie('seenAdvert', 'yes', 1);
}
</script>
Any help would be greatly appreciated
I have a splash page where the user chooses between 2 experiences. once chosen, a cookie is added so they will always get that experience (or at least for the next 30 days). however, if a user comes to the site directly to a sub-url and bypasses the splash page, they should be automatically added to the default experience and get the default cooke (theme1). everything except the default cookie part is working.
here's what i have:
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;
}
$('.theme2').click(function() {
createCookie('chooseTheme','chosenTheme2',30)
});
$('.theme1').click(function() {
createCookie('chooseTheme','chosenTheme1',30)
});
var x = readCookie('chooseTheme');
if ($.cookie('chooseTheme') === null) {
createCookie('chooseTheme','chosenTheme1',30);
}
if (x.indexOf('chosenTheme1') > -1) {
$('body').addClass('themeOne');
} else if (x.indexOf('chosenTheme2') > -1) {
$('body').addClass('themeTwo');
}
thanks!
Try running a loop that updates every 1 minute. During the update, it triggers the function that checks for the cookie like the following:
setInterval(checkCookie(), 60000);
//the 60000 is for 60000 milliseconds which is 1 minute.
function checkCookie() {
var x = readCookie('chooseTheme');
if ($.cookie('chooseTheme') === null) {
createCookie('chooseTheme','chosenTheme1',30);
}
if (x.indexOf('chosenTheme1') > -1) {
$('body').addClass('themeOne');
} else if (x.indexOf('chosenTheme2') > -1) {
$('body').addClass('themeTwo');
}
}
Then add the code above into your code and it will check for the theme every 1 minute. I hope this helps you.
Ok I got this code:
<font face="Arial" size="2">Your random number:</font></b><br></br>
<span class="xr_tl Normal_text" style=" top: 0px;
font-family:Impact;
font-size:20px;
color:#c04e51;">
<script type="text/javascript">
document.write(Math.floor(Math.random()*999999));
</script>
</span>
It generates a random number when you visit the page and works fine but I need it to generate a random number just once. That means when you click refresh, there is no new random number generated and the previously generated number just stays there. How can I do this? I assume it can be done by sending a cookie but I can't figure it out.
var num = localStorage.getItem('num') || Math.floor(Math.random()*999999);
localStorage.setItem('num',num);
document.write(num);
Just stick it in localStorage.
You have to store that number somewhere and then use it. For example in a cookie. Here are some functions to set, get and unset a cookie. I think using cookies is better then localstorage because you choose how long they stay valid.
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);
}
You can use the localStorage API to store information that will remain after the page is closed or refreshed.
var res = localStorage.getItem('randomNumber');
if(res == null){
res = Math.floor(Math.random()*999999)
localStorage.setItem('randomNumber', res);
}
document.write(res);
Demo
I am currently trying to use jQuery to toggle the appearance of a shoutbox and remember the state (hidden / visible) from page to page. The problem I am having is in getting a cookie set to remember the state.
The code I have so far is below, but it doesn't seem to be executing the if statement correctly. Any ideas why?
function show_shoutbox() {
$('#SB').toggle("fast");
if ($('#SB').css('display') == "none") {
document.cookie = "displaysb=false;";
} else {
document.cookie = "displaysb=true; ";
}
}
I am fairly new to JavaScript and jQuery - so I apologize in advance if the answer is obvious. I'm hoping to learn.
Try
if ( $('#SB').is(':visible') ) {
...
}
It's normalized to work a little better than checking display.
document.cookie doesn't work that way. Check out:
http://www.quirksmode.org/js/cookies.html
It even has code at the end of it:
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);
}
use $('#SB')[0] instead of $('#SB').
this part of code returns an array of all elements that satisfy the requirements.
and if you only have one element with this ID, the first element with the index 0 is the element you are searching for.
Cache your element for efficiency
var sb=$('#SB');//cache once outside the function
function show_shoutbox() {
sb.toggle("fast");
if ( sb.is(':visible')) {//do your business
}
else { //do something else
}
}