I have the below javascript function that currently runs on every visit. I do not want to spam our visitors with this popup on every visit so I am trying to get my head around cookies and running this once a week.
setTimeout(function() {
jQuery(document).one('mouseleave', function() {
console.log('mouse left');
jQuery('.open-popup-link').magnificPopup('open');
});
}, 10000);
I placed this within a cookie function that I found on here however nothing runs and no errors in the console.
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
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];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie() {
var pinball = getCookie("pinball");
if (pinball === "") { // Cookie not set
setTimeout(function() {
jQuery(document).one('mouseleave', function() {
console.log('mouse left');
jQuery('.open-popup-link').magnificPopup('open');
});
}, 10000);
setCookie("pinball", "seen", 7);
}
}
What have I missed or need to do to make this run?
I agree with #MysterX about local storage, but to answer your question - from reading your code - there does not seem to be a call to trigger checkCookie() which means that there are no errors because the function has not run.
You should probably have:
$(document).ready(function(){
checkCookie()
})
also you have a typo in the first section of code and in the checkCookie function as well - same error - you have :
jQuery(document).one('mouseleave', function() {...
and it should be .
jQuery(document).on('mouseleave', function() {...
Using localStorage, only call checkSeen once per page load, or execute it inside of setInterval for browsers that never close.
function popup() {
...
}
function updateSeen() {
var sec = Math.round(Date.now()/1000);
localStorage.setItem("seen", sec);
return sec;
}
function checkSeen() {
var seen = localStorage.getItem("seen") || updateSeen();
var now = Math.round(Date.now()/1000);
var week = 604800;
if ((now - seen) >= week) {
updateSeen();
popup();
}
}
checkSeen();
Related
Desperately reaching out here now!
My webpage contains three columns with three different divs: "primary", "main" and "secondary".
I would like to maintain the scrollpositions of all divs on reload.
For the the first column "primary" I'm using this script below, that works lika a charm.
I know getElementbyID only can get one div, so how could I possibly do?
window.onload = function() {
var strCook = document.cookie;
if (strCook.indexOf("!~") != 0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS + 2, intE);
document.getElementById("primary").scrollTop = strPos;
}
}
function SetDivPosition() {
var intY = document.getElementById("primary").scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
The way that you set the cookie seems to be set up primarily for one item - I would change this so that you can set cookies by a key value pairing.
Using some functions for getting and setting cookies, I would then change your code to:
//add cookie functions
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
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);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
//I am assuming you will have some sort of on scroll function for setting your cookie. Change this to a function so you can bind it multiple times
function bindScrollEvent(elementId) {
var element = document.getElementById(elementId);
element.onscroll = function() {
setCookie(elementId, element.scrollTop); // use the element id to set the cookie to the scrolltop value
};
// once the event is bound, you can set it's current scroll position
var scrollTopPosition = getCookie(elementId);
if (scrollTopPosition !== '') {
element.scrollTop = scrollTopPosition;
}
}
// reload the div positions when the document loads
window.onload = function() {
bindScrollEvent('primary');
bindScrollEvent('secondary');
bindScrollEvent('main');
}
I am working on a script which takes the vertical scroll posistioning of a div container and on document unload it stores the vertical posistion within a cookie and then loads it on load.
Originally I had the following:
$('#GridViewContainer').load('claims.php', function() {
$(this).scrollTop($(this).prop("scrollHeight") - $(this).height());
});
Which is ok if you are refreshing the page but if you are reloading the page with parameters it will lose it's position. Solution? Store it in a cookie...
However I am having issues with storing the value and loading it on load. I am using php to return all current Cookies and I can see I am setting the cookie "div_yCookie" but the content seems to be:
'div_yCookie' => string '[object Object]' (length=15)
(I am a complete Javascript and jQuery novice... No doubt it is something obvious but can someone help?
<script>
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);
}
$(document).ready(function () {
$('#GridViewContainer').load('claims.php', function() {
var x = readCookie('div_yCookie');
$(this).scrollTop($(this).prop("scrollHeight") - x);
//$(this).scrollTop($(this).prop("scrollHeight") - $(this).height());
});
});
window.onbeforeunload = function(){
var div_y = $('#GridViewContainer').scrollTop($('#GridViewContainer').prop("scrollHeight") - $('#GridViewContainer').height());
createCookie('div_yCookie',div_y,0.5);
};
</script>
UPDATE
It turns out it actually works when you refresh the page however it still doesn't work when you reload the page.
Okay. So the code pasted below is another update. What I am trying to do is use a cookie to store the position of an object which changes it's position based on two buttons (DIVs actually).
The createCookie and readCookie are basically copy and pasted.
The checkCookie and storeCookie are doing most of the functionality I'm looking for (remembering cookie & checking on page load).
The $(document).ready(function() is the position control using jquery.
<SCRIPT type=text/javascript>
////////////////////////FROM QUIRKSMODE.ORG///////////////////////////////
//equivalent of "setCookie" from w3schools
//time is represented in days*hours*minutes*seconds*milliseconds
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=/";
}
//equivalent of "getCookie" from w3schools
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;
}
///////////////////////////////////////////////////////////////////////////
///////////////////////////cookie functions////////////////////////////////
var pos=readCookie("position");
//var object = document.getElementById('CWS_flow_001');
function checkCookie()
{
var object = document.getElementById('CWS_flow_001');
if (pos=378)
{
object.style.position="absolute";
object.style.left = 378;
$("#show_primary_rec_001").fadeIn(500);
$("#show_secondary_rec_002").fadeOut(500);
}
else if (pos=-990)
{
object.style.position="absolute";
object.style.left = -990;
$("#show_primary_rec_001").fadeOut(500);
$("#show_secondary_rec_002").fadeIn(500);
}
}
function storeCookie()
{
//var pos=readCookie("position");
createCookie("position",pos,1*24*60*60*1000);
alert("the cookie is set to " + pos);
}
////////////////////////////////////////////////////////////////////////////
////////////////////////animation of object/////////////////////////////////
$(document).ready(function() {
$("#show_secondary_rec_002").fadeOut(0);
$("#show_primary_rec_001").click(function moveLeft () {
$("#CWS_flow_001").animate({
left: "-990px"
}, 500 );
$("#show_primary_rec_001").fadeOut(500);
$("#show_secondary_rec_002").fadeIn(500);
//sets "pos" to -990 and runs storeCookie on click w/ 1 second delay
pos=-990;
setTimeout("storeCookie()", 1000);
});
$("#show_secondary_rec_002").click(function moveRight () {
$("#CWS_flow_001").animate({
left: "378px"
}, 500 );
$("#show_primary_rec_001").fadeIn(500);
$("#show_secondary_rec_002").fadeOut(500);
//sets "pos" to 378 and runs storeCookie on click w/ 1 second delay
pos=378;
setTimeout("storeCookie()", 1000);
});
});
</SCRIPT>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
What's wrong with my above code my facebook like popup is called every time the page is loaded in my blog. I just to show only one time every 30 days.How i can do that?
Your particular implementation looks like it has you checking the cookie for 'visited=false', but setting the cookie to 'visited=true' so your if statement will never match.
I'd suggest you use a proven set of cookie manipulation functions and then your task will be pretty easy.
Here are the cookie functions I use when my environment doesn't already have them:
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);
}
Once you have those, you can do this:
jQuery(document).ready(function() {
var visited = readCookie('visited');
if (!visited || visited !== "true") {
createCookie('visited', "true", 30);
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
I have a downloaded stylesheet switcher that doesn't seem to work properly.
The switcher works in as much as the new stylesheet is loaded, however the cookie that it is meant to store and read never actually occurs (I assume as much, as when I refresh the page it reverts back to the default stylesheet).
The console in chrome returns the following error:
Uncaught ReferenceError: readCookie is not defined
Now my theory was that the readCookie variable wasnt defined and i should move it to the top, but that just rendered the script completely inactive.
I'm not a complete newbie when it comes to jQuery, however this is a downloaded script and I've had no experience with javascript cookies before.
Any help would be HUGELY appreciated.
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[#rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions 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);
}