Show loading animation only on first time page load using Cookies? - javascript

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.

Related

Only show jQuery once per session

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;
});
}
});

how to prevent the previous submitted modal from popping out when hitting the back button?

the situation was like this. I have a bootstrap coded modal. When I click a submit button, it gets triggered and pop-out a box that has a yes or no plus input box in it. So either I click yes or no, it will just close the box. Some other pages also has this popup up. the problem is, after the modal closed down, when I clicked the back button, of the page, the modal also pops out when there's no javascript that triggers to fire it. the previous code of the back button was like
go.history(-1)
then I tried to changed it to
windows.history.back()
it didn't helped at all, it still pops out the modal . any ideas how to fix this issue?
You may set a cookie. When it exists, simply dont show your modal.
Here is an example:
Note: I will use a snippet I found here.
var cookieName = 'home_modal';
if(!readCookie(cookieName)){
showModal();
//the modal will not show up for 1 day
createCookie(cookieName, 1, 1);
}
// #### [Base functions] ####
// Cookies
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() {
//your modal logic goes here
}

cookie string and inserting info into text boxes

I have about 88 input boxes that I would like to have cookies repopulate onload. I have looked everywhere and cant find anything that works. I cant set one value per cookie because I have too many input boxes. All the data is less than 4000bytes. I want to break up the input values to about 20 values per cookie. So far this is all I have which isnt much. I think I need another piece of code to save the cookie string and another one to break up the cookie string and repopulate the input boxes (document.formname.inputname.value). Can someone tell me what I need here? A working piece of code would probably be best that I can just add all the document.formname.inputname.values since I dont really understand the cookie functions. I dont need the erasecookie function. Thanks.
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 + "=",
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;
}

Load lightbox every 'x' amount of page loads

I am using a jQuery Colorbox onLoad lightbox which works no problem.
This is the code so far, I was wondering how to make the lightbox appear every 5 page loads (for example). So as the user is browsing the site, every 5th page they visit the lightbox appears.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$.fn.colorbox({href:"xxxxx.jpg", open:true});
}, 1500);
});
</script>
Thanks, any help is appreciated, even if you can point me in the right direction.
Generally you would have to keep track of the page load count. Like Anthony suggested, you should keep it in a cookie.
I found two functions online to handle cookies: cname = cookie name, cvalue is what you save in the cookie, and milliseconds is for how long the cookie is valid;
function setCookie(cname, cvalue, milliseconds) {
var d = new Date();
d.setTime(d.getTime() + (milliseconds));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
So what you would want to do is every page load retrieve a cookie with the count and increase it:
var _pageloads = getCookie("PageLoadCount");
if(_pageloads=="")
{
_pageloads=0;
}
_pageloads +=1;
if(_pageloads ==5){
_pageloads =0; //reset your counter
//pop up the lightbox
}
setCookie("PageLoadCount",_pageloads,1 * 60 * 1000); //make cookie valid for one hour

preserving the state using javascript and jquery

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..

Categories