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
Related
I am learning about cookies and JavaScript for a student project and have attempted to use them in a school project. However, I have stumbled onto a problem when I try to implement a simple function which bookmarks articles.
This is the code which I place in an article. When I press the bookmark icon, the function below is triggered, creating a cookie that expires after 14 days.
<script>
function showBookmark() {
document.getElementById("bookmark").innerHTML = "bookmark";
var d = new Date();
d.setTime(d.getTime() + (14*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = "cookie1" + "=" + "Article 1 - Title Of Article 1" + ";" + expires + ";path=/";
};
</script>
This is the code which I place in the page where I store and display all the bookmarks the user has made. The code scans through 20 cookies ("cookie1", "cookie2" to "cookie20") and then displays the first 10 cookies where there is a value. The cookies are then displayed in a table using innerHTML().
<script>
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);
} else {
return "false"
}
}
};
var counter=0;
for (var alpha=0; alpha<20; alpha++){
bookmark = getCookie("cookie"+alpha.toString());
if (counter > 10){
break;
}
if (bookmark != "false"){
document.getElementById("bookmark"+counter.toString()).innerHTML = bookmark;
counter++;
}
};
</script>
However, for some reason the code above does not display the intended result (the name of the article does not appear on the page with all the bookmarks even after pressing the icon and triggering the getCookie function). Is there something wrong with my code?
(This is the first question I am asking so any advice would be greatly appreciated)
This Javascript cookie script works great so far, you just adjust when you would like the cookie to expire in the (expiresDays*24) line. However, I would like the cookie to expire when the browser is completely closed, but the cookie to persist whilst you are still on the site, even if you go to another webpage or reload the home page. I read this is doable and can be done with session cookies, by setting the value to 0 or no value, but being a learner on javascript, I am not sure how to do it, do any more experienced programmers know how to adjust the script below to do what I would like?
<script type="text/javascript">
function setCookie(cookieName, cookieValue, expireDays,isGlobal) {
var expireDate = new Date();
expireDate.setTime(expireDate.getTime() +
(expireDays*24*60*60*1000));
var expires = "expires="+expireDate.toUTCString();
if(isGlobal){
document.cookie = cookieName + "=" + cookieValue + "; " +
expires+"; path=/";
}else{
document.cookie = cookieName + "=" + cookieValue + "; " +
expires;
}
}
function getCookie(cookieName) {
var name = cookieName + "=";
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 "";
}
function checkCookie(cookieName) {
if (getCookie(cookieName) != "") {
return true;
} else {
return false;
}
}
</script>
I fixed this issue, all that was needed was to replace the values in this line:
from (expireDays*24*60*60*1000))
and change to:
(expireDays"=0"))
otherwise I left the scrip unchanged, the cookies lasts the duration of the visit to the website, including if you navigate around the site. But if you completely close the browser, the cookie expires.
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
}
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 would like to be able to show a user a picture from one form page to the next. The picture will be dynamic based on what he or she is doing. So, I need to store the path link to that image in a cookie and then load that image on the next page.
How do I do that?
Check the plugin: https://github.com/carhartl/jquery-cookie
and then do:
$.cookie("img", img_url);
[OR]
You can set and get cookie using these functions: (From Quirksmode)
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = escape(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 unescape(c.substring(nameEQ.length, c.length));
}
return null;
}
Use document.cookie to set and get the image URLs.
check this cite for details: w3Schools
It shows that you didn't do much research on this simple thing.
Here's a very simple JSFiddle: fiddle
// Assign the cookie
document.cookie = "imgpath=/your/image.png";
alert(document.cookie);
// Use a regular expression to get the path from the entire cookie string. Sanitizations are left up to you.
var imgPath = /imgpath=([^;]+)/i.exec(document.cookie)[1];
alert(imgPath);
I suggest using the jQuery.cookie plugin mentioned in the other answers though, no need to make it any harder than it already is.
Here is the regular expression explained: http://regex101.com/r/qH6rB5/1 - it shows how the actual value you are interested in, is captured.