Disable Fancybox Pop-Up With Cookies - javascript

I have a Fancybox set on a delay to pop up on any page of my Wordpress, I'm looking to have it become disabled after a user submits something in the provided input or have it not show up for a given amount of time if the user clicks on the bypass link. I've tried a few scripts found around this site but nothing seemed to work, here's what I currently have set in place.
function openFancybox() {
setTimeout( function() {$('.pop').trigger('click'); },20000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 7 });
$('.pop').fancybox();
});

Please try the below to see if that helps.
openFancybox = function{
setTimeout( function() {$('.pop').trigger('click'); },20000);
}
$(document).ready(function() {
//Declare your cookie.
$.cookie('visited','no', { expires: 7 });
//Test to see if your cookie equals 'no', if true then run the fancy box.
if ($.cookie('visited') == 'no') {
openFancybox();
}
//Your Input or click to stop the fancy box
$('#StopFancyBox').on('click',function(){
$.cookie('visited', 'yes');
});
});
As #Brad mentioned you can use the web developer tools to test to see what your cookie value is at stages. Simply go to the web.console and call back $.cookie('visited')
ERRORS
jquery.cookie.jsGET http://www.coreytegeler.com/bolivares/wp-content/themes/max-magazine/source/cookies/jquery.cookie.js 404 (Not Found)
The above seems to be because the jquery.cookie.js file is not referencing the right location.
/bolivares/:72SyntaxError: Expected token '('
The above is actually my fault :) sorry. When declaring the function openFancybox i missed off the (). So it should be openFancybox = function(){.
jquery-plugins.min.js:13TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')
superfish.js:123TypeError: 'undefined' is not a function (evaluating 'jQuery('ul.nav').superfish()')
woocommerce.min.js:1TypeError: 'undefined' is not a function (evaluating 'e(".plus").live')
The above are conflicts with the plugins jquery-plugins.min.js, superfish.js and woocommerce.min.js respectively. I'm sorry I can't give much guidance on these.
/bolivares/:259ReferenceError: Can't find variable: myLoop
You're calling back myLoop(i) on line 259 on your main html page. But searching through all of your scripts, this isn't declared anywhere.

Yes you can edit it perfectly all you have to do is create a settimeout value so that the fancybox pops out after some time and then write the program like this
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('#fancybox-manual-b').trigger('click'); },5000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
$.cookie('visited', 'yes', { expires: 7 }); /*write this first*/
if (visited == 'yes') {
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000); /*let the page load first*/
a = "subscriber";
} else {
openFancybox();
}
$('#fancybox-manual-b').fancybox();
});
</script>
If you want you can change the (I wrote this to check if the cookie is working properly or not)
if (visited == 'yes') {
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000);
a = "idiotteen";
}
to
if (visited == 'yes') {
return false;
}
Let me know if this helped you

Related

Keep Javascript running after reload on chrome console

So, I want to check every 15 sec on some website if some words have been deleted.
I have done this:
window.setInterval(myFunction, 15000)
function myFunction()
{
//Check that "words" are not on web anymore
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('words') > -1)
{
alert("They still here");
}
else
{
alert("They are gone");
}
location.reload();
}
But becaue of the location.reload(); they script can only run once.
What do I do?
call timer in window.load and remove reloading of location.
window.onload = function() {window.setInterval(myFunction, 15000)};
function myFunction()
{
//Check that "words" are not on web anymore
if ((document.documentElement.textContent || document.documentElement.innerText).indexOf('words') < -1)
{
alert("They are gone");
}
}
I think tampermonkey is what you are looking for https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

Navigate stop only when going to another website

I am using following code to trigger the are you sure leaving website alert but for some reason its not recognising my if else condition in it and only works if I only put return true in window.onbeforeunload = function() { return true } . Is there a way I can trigger this alert only when user is navigating away from my website cause at the moment without if else condition its asking if user tries to navigate in the same website as well?
window.onbeforeunload = function() {
var location = window.document.activeElement.href;
if (typeof location != 'undefined')
{
console.log(location);
} else { reutn true; }
};
You can set a flag and toggle that flagged based on host of links that are clicked
var host = location.hostname,
allowNavigate = false;
window.onbeforeunload = function() {
if (!allowNavigate) {
return 'Message string';// not what actually gets displayed in most browsers these days
}
//don't return anything
return;
};
window.onload = function() {
document.querySelectorAll('a').forEach(function(a) {
a.addEventListener('click', function(e) {
allowNavigate = this.hostname === host;
});
});
};
The hostname on this page for example is "stackoverflow.com"
DEMO
You can add the "window.onbeforeunload" dynamically for the links you want to see the prompt message
and remove the "window.onbeforeunload" for the links you don't want prompt
<a onClick="a(true)" href="https://www.w3schools.com">Click here to get promt before navigate</a>
<br>
<a onClick="a(false)" href="https://jsfiddle.net/">Click here to navigate without promt </a>
<script>
function a(showPrompt){
window.onbeforeunload = showPrompt ? function(e) {return '';}: null;
}
</script>
https://jsfiddle.net/vqsnmamy/1/

Javascript onUnload Show offer and redirect to offer page if stays on page [duplicate]

Rewriting the question -
I am trying to make a page on which if user leave the page (either to other link/website or closing window/tab) I want to show the onbeforeunload handeler saying we have a great offer for you? and if user choose to leave the page it should do the normal propogation but if he choose to stay on the page I need him to redirect it to offer page redirection is important, no compromise. For testing lets redirect to google.com
I made a program as follows -
var stayonthis = true;
var a;
function load() {
window.onbeforeunload = function(e) {
if(stayonthis){
a = setTimeout('window.location.href="http://google.com";',100);
stayonthis = false;
return "Do you really want to leave now?";
}
else {
clearTimeout(a);
}
};
window.onunload = function(e) {
clearTimeout(a);
};
}
window.onload = load;
but the problem is that if he click on the link to yahoo.com and choose to leave the page he is not going to yahoo but to google instead :(
Help Me !! Thanks in Advance
here is the fiddle code
here how you can test because onbeforeunload does not work on iframe well
This solution works in all cases, using back browser button, setting new url in address bar or use links.
What i have found is that triggering onbeforeunload handler doesn't show the dialog attached to onbeforeunload handler.
In this case (when triggering is needed), use a confirm box to show the user message. This workaround is tested in chrome/firefox and IE (7 to 10)
http://jsfiddle.net/W3vUB/4/show
http://jsfiddle.net/W3vUB/4/
EDIT: set DEMO on codepen, apparently jsFiddle doesn't like this snippet(?!)
BTW, using bing.com due to google not allowing no more content being displayed inside iframe.
http://codepen.io/anon/pen/dYKKbZ
var a, b = false,
c = "http://bing.com";
function triggerEvent(el, type) {
if ((el[type] || false) && typeof el[type] == 'function') {
el[type](el);
}
}
$(function () {
$('a:not([href^=#])').on('click', function (e) {
e.preventDefault();
if (confirm("Do you really want to leave now?")) c = this.href;
triggerEvent(window, 'onbeforeunload');
});
});
window.onbeforeunload = function (e) {
if (b) return;
a = setTimeout(function () {
b = true;
window.location.href = c;
c = "http://bing.com";
console.log(c);
}, 500);
return "Do you really want to leave now?";
}
window.onunload = function () {
clearTimeout(a);
}
It's better to Check it local.
Check out the comments and try this: LIVE DEMO
var linkClick=false;
document.onclick = function(e)
{
linkClick = true;
var elemntTagName = e.target.tagName;
if(elemntTagName=='A')
{
e.target.getAttribute("href");
if(!confirm('Are your sure you want to leave?'))
{
window.location.href = "http://google.com";
console.log("http://google.com");
}
else
{
window.location.href = e.target.getAttribute("href");
console.log(e.target.getAttribute("href"));
}
return false;
}
}
function OnBeforeUnLoad ()
{
return "Are you sure?";
linkClick=false;
window.location.href = "http://google.com";
console.log("http://google.com");
}
And change your html code to this:
<body onbeforeunload="if(linkClick == false) {return OnBeforeUnLoad()}">
try it
</body>
After playing a while with this problem I did the following. It seems to work but it's not very reliable. The biggest issue is that the timed out function needs to bridge a large enough timespan for the browser to make a connection to the url in the link's href attribute.
jsfiddle to demonstrate. I used bing.com instead of google.com because of X-Frame-Options: SAMEORIGIN
var F = function(){}; // empty function
var offerUrl = 'http://bing.com';
var url;
var handler = function(e) {
timeout = setTimeout(function () {
console.log('location.assign');
location.assign(offerUrl);
/*
* This value makes or breaks it.
* You need enough time so the browser can make the connection to
* the clicked links href else it will still redirect to the offer url.
*/
}, 1400);
// important!
window.onbeforeunload = F;
console.info('handler');
return 'Do you wan\'t to leave now?';
};
window.onbeforeunload = handler;
Try the following, (adds a global function that checks the state all the time though).
var redirected=false;
$(window).bind('beforeunload', function(e){
if(redirected)
return;
var orgLoc=window.location.href;
$(window).bind('focus.unloadev',function(e){
if(redirected==true)
return;
$(window).unbind('focus.unloadev');
window.setTimeout(function(){
if(window.location.href!=orgLoc)
return;
console.log('redirect...');
window.location.replace('http://google.com');
},6000);
redirected=true;
});
console.log('before2');
return "okdoky2";
});
$(window).unload(function(e){console.log('unloading...');redirected=true;});
<script>
function endSession() {
// Browser or Broswer tab is closed
// Write code here
alert('Browser or Broswer tab closed');
}
</script>
<body onpagehide="endSession();">
I think you're confused about the progress of events, on before unload the page is still interacting, the return method is like a shortcut for return "confirm()", the return of the confirm however cannot be handled at all, so you can not really investigate the response of the user and decide upon it which way to go, the response is going to be immediately carried out as "yes" leave page, or "no" don't leave page...
Notice that you have already changed the source of the url to Google before you prompt user, this action, cannot be undone... unless maybe, you can setimeout to something like 5 seconds (but then if the user isn't quick enough it won't pick up his answer)
Edit: I've just made it a 5000 time lapse and it always goes to Yahoo! Never picks up the google change at all.

jquery: check if window has been scrolled once and do something

Because of a new implementation of the cookie law, I have to gather consent for some cookies. One of the methods, is to wait for the user to scroll the page once, which has been legally meant to be an implicit consent.
I tried with:
jQuery(window).one('scroll', function(){
$(this).data('scrolled', true);
});
if(jQuery(window).data('scrolled')) {
console.log( 'ok' );
//place cookies
} else {
console.log( 'no' );
}
inside a script ( http://www.primebox.co.uk/projects/jquery-cookiebar/ ) that is called via:
$(document).ready(function(){
$.cookieBar({
});
});
However, console.log always tells me "no", regardless of the scrolling of the page.
Any hints?
Thanks in advance
Your code works fine if I change this like this:
<script>
jQuery(window).one('scroll', function()
{
$(this).data('scrolled', true);
if(jQuery(window).data('scrolled'))
{
console.log('ok');
//place cookies
}
else
{
console.log('no');
}
});
</script>
However I could not make out what $.cookieBar is doing ?
Check scroll and do some thing you want
window.onscroll = function (e) {
// called when the window is scrolled.
}
This will call every time when user scroll if you want to call it
only once then do some trict
Make a hidden Field
Now set value of this hidden field to true when scroll method call
window.onscroll = function (e)
{
if (document.getElementById("ScrollOnceCheck").value == "false")
{
document.getElementById("ScrollOnceCheck").value = "true";
// update cookie
}
}

Autosave using javascript issue

The following piece of code autosaves a page but it also times it out by loging out and taking the user to a time out page. How can i chnage it so that it only does the auto save part but not the time out?
<script language='javascript'>
function Save() {
var hdnSessionTimeOut = document.getElementById('fast22_MainCtn_fast44');
hdnSessionTimeOut.value = 'SessionTimeOut';
__doPostBack('Fast22$MainCtn$btnSave', '');
}
function Redirect() {
window.location = "SessionTimeout.aspx"
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 30000);
else setTimeout(Redirect, 30000);
}
</script>
I tried reducing it to the following but and I think it worked but it changed the doc to view mode instead of edit mode. and you have to click edit again. Also when it in edit mode, the counter still works and it gives and error. Is there a way to have it auto save and then go back again to edit mode?
<script language='javascript'>
function Save() {
__doPostBack('ctl00$MainContentPlaceHolder$btnSave', '');
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 10000);
else setTimeout(Save, 25000);
}
</script>

Categories