So I use the following code to show and fade an element. I have set the div on visible on the homepage and hidden on all other pages so the div only shows up on the homepage. My problem is, everytime I visit the homepage, the div will show up. Instead I would like to show the div only once per session. I've tried to fix it with cookies but it didn't work.
$(window).load(function(){
$("#testlay").fadeIn('slow').delay(1000).fadeOut(1600);
});
You can use coockie for this take a look at below example hope it helps
Please find this fiddle for the same
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toUTCString();
}
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);
}
//your window load function replace with below
$(function(){
if(readCookie('CodefireOnce') == null)
{
createCookie('CodefireOnce','true',7);
$("#testlay").fadeIn('slow').delay(1000).fadeOut(1600);
}
});
You can use localStorage which would be more right in this case IMO.
$(window).load(function(){
if(typeof localStorage.testlayHidden != 'undefined') {
$("#testlay").fadeIn('slow').delay(1000).fadeOut(1600, function() {
localStorage.testlayHidden = 1;
});
}
});
Related
I would like to implement a JavaScript code which states this: if the page is loaded completely, refresh the page immediately, but only once. This one works fine:
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
but I don't want hash at the end. Any solution?
use cookies or localStorage
window.onload = function() {
if(!localStorage.loaded) {
localStorage.setItem('loaded', 'yes')
window.location.reload();
}
}
If first time will loaded then you have to set the hash ('loaded'). The automatically will reload the page. Second time he will found the hash #loaded in the url and dont reload the page again.
To avoid hash in the url you can use cookie or localStorage.
LocalStorage: In this case take a look to the answer from #uingtea: https://stackoverflow.com/a/71373469/14807111.
window.onload = function() {
if(window.location.hash !== '#loaded') {
window.location.hash = '#loaded';
window.location.reload();
}
}
With cookie
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
window.onload = function() {
if(getCookie('loaded')) {
setCookie('loaded','true',180);
window.location.reload();
}
}
I am storing cookies from form values using the below code. I can see that the cookies have been stored when I look under Application > Cookies in developer tools. When you press submit on this form, it takes you to the start of a survey. The pages of the survey are within the same file path of the form page. After the first page of the survey loads, I check in developer tools and the cookies aren't there. This only happens randomly, but I've found that it happens much more often on Macbooks using Chrome. I am on a pc using chrome and it's never happened to me.
// Script to set cookies
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 + ";path=/";
}
// Script to get cookies
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 "";
}
//Check for enabled cookies
function areCookiesEnabled() {
document.cookie = "__verify=1";
var supportsCookies = document.cookie.length >= 1 &&
document.cookie.indexOf("__verify=1") !== -1;
var thePast = new Date(1976, 8, 16);
document.cookie = "__verify=1;expires=" + thePast.toUTCString();
return supportsCookies;
}
//Set cookies on form submission
$(document).ready(function() {
$( "#fn-2" ).change(function() {
setCookie("firstName", this.value, 30; path=appfire.com/club);
});
$( "#ln-2" ).change(function() {
setCookie("lastName", this.value, 30);
});
$( "#eml-2" ).change(function() {
setCookie("email", this.value, 30);
});
});
$("#wf-form-club_profile_creator").submit(function(e){
e.preventDefault();
if (areCookiesEnabled() ) {
console.log('Cookies are enabled.');
window.location.replace("http://www.appfire.com/club/quiz/q1");
} else {
console.log('Cookies are disabled');
alert('Cookies appear to be disabled in your browser. To create your A List club profile, please enable cookies and try again. Thanks!');
window.location.replace("http://www.appfire.com/club");
}
});
I have loading animation on my HTML page and it is working absolutely fine. The problem is whenever page gets refreshed, the loading animation appears again and I want to limit it to only first time page load.
I was using cookies to solve the problem and I took reference from one of stackoverflow questions:
load an ad (div) just once on first load. I was using the exact same code which is answered there, just replaced my id.
$(document).ready(function() {
if (!readCookie("adSeen")) {
$("#loading").fadeOut("slow");
createCookie("adSeen", "1", 1000);
}});
Rest of the code is same. My cookies are enable, but it is not working. Help me to fix it.
Here's my code: https://jsfiddle.net/mytest_jsfiddle/ojo2mosd/5/
Change your code to
$(document).ready(function() {
if (!readCookie("adSeen")) {
$("#loading").fadeIn("slow");
createCookie("adSeen", "1", 1000);
}
});
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;
}
For reference, Please refer to the below fiddle:
https://jsfiddle.net/aman_chhabra/fguq4hnd/1/
Hope that helps.
I have two pages not popup. I want pass value from one to textbox in another one. And then close sender page.
If i use popup, I use this codes
My textbox in first page codes.
<input type="text" name="ModelTulID" id="ModelTulID"/>
Sender page's codes:
<input name="ModelID" type="hidden" value="<%=ID%>" />
<input type="button" value="Submit" onClick="sec()">
<script type="text/javascript">
function Sec() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("ModelTulID");
txtName.value = document.getElementById("ModelID").value;
}
window.close();
}
But my pages are not popup and i don't know what i do. I tried window.top instead window.opener but it didn't work.
Thanks for your helps...
What you may want to take a look at is Javascript cross page cookies.
http://www.quirksmode.org/js/cookies.html
Set Get Cookie Demo
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 having problem figuring howto preserve the present state ...Let say I have selected radio button and checkbox in present form and navigate way to a different page but if I want to go back to old page how should I able to see the selected radio and checkboxes in my previous page..
Well you can use cookies to do the same. here is a small code snippet that acts over cookies:
var myCookieHandler = (function () {
return {
createCookie: function (name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
},
readCookie: function (name) {
var nameEq = name + "=";
var ca = document.cookie.split(';');
var i;
for (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;
},
deleteCookie: function (name) {
this.createCookie(name, null, -1);
}
};
}());
usage:
myCookieHandler .writeCookie("Login","true",2);
var cookieValue=myCookieHandler.readCookie("Login");
myCookieHandler.deleteCookie("Login");
Thus when you come back to this page you read your cookie and do the necessary with the same.
Hope this helps..