I have the following script that is for a popup on my home page. It works well except the cookie seems to reset its self every day. I would like for the cookie to expire as far into the future as possible. My problem is that i am new to javascript and cookies within. Can someone let me know what part i need to change? I have messed with some of it but seem to be making it worse.
As it sits on my site (http://www.swissdiamond.us) You can see that it is working (loads the div the first time you are there, and not any other) but if you come back tomorrow the hidden div will re-load.
Thanks for any help
<script type="text/javascript">
//<![CDATA[
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);
}
function showModal() {
tb_show('Newsletter Signup','#TB_inline?height=300&width=450&inlineId=promo',false);
}
var visited = readCookie('mypopup');
if (!visited) {
$(document).ready(function(){
showModal();
createCookie('mypopup','no',0);
});
}
//]]>
</script>
You need to update this line
date.setTime(date.getTime()+(days*24*60*60*1000));
Or you can pass days value from here
createCookie('mypopup','no',0); // make the last parameter value as much as you want
Here you can add more days as you want. hope this helps.
Your createCookie function sets the expiry for you, however you are passing 0 as the days value to expire, so the cookie does not persist. Try this:
createCookie('mypopup', 'no', 7); // 7 = expires in 7 days, amend as required.
Related
Only using Javascript, can someone create a html file that uses "XY" html code when the user first visits it, but it should use "ZQ" (so a fully other one) html code after the first visit? So in the second, third, etc. visit of the same user. There could be many users.
Question: how would that html file look like? How to do it? Is it possible using only javascript?
You can use either Cookies or LocalStorage, where the LocalStorage is easier to implement, but requires the latest browser, and users may disable cookies for privacy reasons.
Cookies
function setCookie(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 getCookie(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;
}
// First Visit
if (getCookie("visited") == null) {
// XY code.
alert("XY Code here");
// set the cookie
setCookie("visited", "yes", 10);
} else {
// subsequent visit.
// ZQ code.
alert("ZQ Code here");
}
LocalStorage
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem("visited") == "yes") {
// subsequent visit.
// ZQ code.
alert("ZQ Code here");
} else {
// XY code.
alert("XY Code here");
// set the cookie
localStorage.setItem("visited", "yes");
}
} else {
// Sorry! No Web Storage support..
// Use the above cookie method.
}
I am setting up a cookie based on the user first visit on a website. So every time a new user visit the website I am redirecting them to the landing page otherwise the user will see the index page directly (since time time the cookie is already in the user's browser).
Now what I am trying to achieve is that I would like skip the landing page redirect based on a specific URL (for both new users and existing users).
This is how I am checking the new visit and setting up a redirect cookie.
$(document).ready(function() {
landingPageOnFirstVisit();
createCookie('landingRedirect', 'true', '60');
});
function landingPageOnFirstVisit() {
var setCookieForLanding = readCookie('landingRedirect');
if (!setCookieForLanding) {
window.location = "/en/landing";
}
}
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;
}
How do I make sure that if user visit the website directly using the below mentioned URL pattern: the redirection process would not occur and we wont set any cookies.
https://www.domain.com/en/page?usePromo=XXXXXX
(where XXXXXX are numbers and changes everytime)
Try
$(function() {
if (location.href.indexOf("usePromo")==-1) {
landingPageOnFirstVisit();
createCookie('landingRedirect', 'true', '60');
}
});
I have the following function to change stylesheets on my website that I want to use cookies to keep stylesheet theme persistent across pages.
<script type="text/javascript">
var i=1;
function styleSheet(){
if(i%2==0){
swapper('css/main.css');
document.cookie = "username=Visitor";
}
else{
swapper('css/stylesheetalternate.css');
document.cookie = "username=alternateVisitor";
}
i++;
}
<button onclick="styleSheet()">Click me</button>
I'm already setting my cookies inside of this function. I'm not too interested in setting expiration dates or anything like that, the default is fine for me. What I do want to try doing however is read the cookies inside of this function each time that I use the button I created. Is there no way to read it inside of the same function?
I'm aware that there exists a jquery library that does this, but I don't want to use jquery if I can get a better performance with javascript.
EDIT:
<script type="text/javascript">
var i=1;
function styleSheet(){
if(i%2==0){
swapper('css/main.css');
document.cookie = "username=Visitor";
readCookie(Visitor);
}
else{
swapper('css/stylesheetalternate.css');
document.cookie = "username=alternateVisitor";
readCookie(alternateVisitor);
}
i++;
}
Do you mean something like the following when you say to use readCookie inside of my function? What I notice from this sort of implementation is that after swapping stylesheets once, it is for whatever reason impossible to swap again until the page is reloaded.
Here's a set of plain javascript cookie functions that you can use from any function. So, to your question, you can call readCookie("username") from your function (or read any other cookie value):
// createCookie()
// name and value are strings
// days is the number of days until cookie expiration
// path is optional and should start with a leading "/"
// and can limit which pages on your site can
// read the cookie.
// By default, all pages on the site can read
// the cookie if path is not specified
function createCookie(name, value, days, path) {
var date, expires = "";
path = path || "/";
if (days) {
date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=" + 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);
}
document.cookies is just a big list of all the cookies. You can parse through it to find the one you're interested in:
function getCookieValue(cookieName) {
var value = null;
document.cookie.split(';')
.forEach(function(pair){
var pairArray = pair.split('=');
if (pairArray[0]==cookieName) {
value = pairArray[1];
}
});
return value;
}
(Untested, let me know how it goes.)
I have a script that redirects the user to a new page after X seconds. After being redirected, if the user hits their back button and returns to the page with this script I'd like it if the script does not fire again.
setTimeout(function() {
window.location.href = "/mypage.html";
}, 3000);
You can get the referrer property in JavaScript like this:
var referrer_url = document.referrer;
document.write("You come from this url: " +referrer_url);
Then, just wrap your setTimeout() with a conditional check to see which URL the person is coming from and do (or do not) do the redirect depending on where they came from.
I used the link Cerbrus provided and went the cookie route to solve this. More complicated than I would have liked but it got the job done.
This script will redirect the user to a new page after 3 seconds. It will first check if a cookie exists, and if it does it will not redirect. If there's no cookie, it will create a cookie and then redirect the user. If the user hits the back button the script will find the cookie that was created and it will prevent the script from redirecting the user again.
// Function to create a new cookie
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 to read a cookie
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;
}
// Use the readCookie function to assign the cookie to a variable (if it's available)
var currentcookie = readCookie('mycookie');
// If/else statement to fire javascript if the cookie is not present
if (currentcookie) {
// do nothing since the cookie exists
}
else {
// Cookie doesn't exist, so lets do our redirect and create the cookie to prevent future redirects
// Create a cookie
createCookie('mycookie','true');
// Perform the redirect after 3 seconds
setTimeout(function() {
window.location.href = "/mypage.html";
}, 3000);
}
I need to create a javascript cookie in order to do something with PHP (to be exactly, I need to get the viewport height of the browser, store that in a javascript cookie in order to get the value inside PHP). The only problem is I have no javascript experience, and I dont't understand google's explanation.
I'd like to have this value (var viewportHeight = $(window).height();) inside a cookie.
But how?
(google only gives examples with a static value).
try something like this:
var viewportHeight = $(window).height();
document.cookie = "viewportheight=" + viewportHeight + ";";
You can't have dynamic values for a cookie. You can however update the cookie every time the window resizes:
$(function(){
$(window).resize(function () {
createCookie( 'viewportHeight', $(window).height() );
});
});
// You should also use some cross-browser cookie functions that make your life a lot easier
// function taken from: http://www.quirksmode.org/js/cookies.html
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);
}
This way you can simulate "dinamic" values for a cookie.
Alternatively, you can just send the value via ajax to a php script every time the browser resizes, without having to use cookies at all
Seems like a bad idea to me. Your layout shouldn't required the exact pixel dimensions on the server side. But, if you really have no other option:
Use this jQuery plugin: https://github.com/carhartl/jquery-cookie
Then you can do the following:
// save the window height to a cookie whenever window is resized
$(window).resize(function(){
$.cookie('viewportHeight', $(window).height(), {path:'/'});
});
// trigger the resize function so it saves the cookie on first load
$(window).load(function(){
window.setTimeout(function() {$(window).resize();}, 0);
}
Then you access it from PHP in subsequent requests like so:
$viewportHeight = $_COOKIE['viewportHeight'];
Please note that if you need the cookie value in PHP before the user sees the first page, this will not work.