We Keep Coding

Using cookies to not show a popup based on particular actions

I"m currently using a fancybox to deliver content in a popup 2 seconds after a page loads. I'd like implement something that would remove the annoyance of this popping up every single time a page on the site is loaded.
Ideally, if a visitor clicked the "close" button on the fancybox, the pop-up wouldn't appear for them until the next day. If the visitor clicked the link that's in the popup, then the popup wouldn't appear until a specified later date.
Here's the code I'm currently using for the popup:
// fancybox arguments
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
'autoDimensions': false,
'autoSize': false,
'width': '650',
'height': 'auto'
});
// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)
I assume this can be done using js cookie, but i'm not sure how the syntax would work based off what I'm trying to do with two different expirations .
EDIT:
Here's the HTML that is used for the pop-up:
<div style="display:none">
<a class="fancybox" href="#donation-info" alt=""/></a>
<div id="donation-info">
<?php if (get_field('donation_box_text', 'option')){
echo '<h2>To all our readers:</h2>';
echo '<p>' . get_field('donation_box_text', 'option') . '</p>';
echo '<div style="text-align:center"><a href="' . get_field('donation_link', 'option') . '" id="donate" class="donate-link" />Donate</a></div>';
}; ?>
</div>
</div>
I also tried updating the above function to include cookies, from the best of my guesstimation, to no avail:
$(document).ready(function() {
if ($.cookie('noShowDonation')) $('.fancybox').hide();
else {
$("#donate").click(function() {
// fancybox arguments
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
'autoDimensions': false,
'autoSize': false,
'width': '650',
'height': 'auto'
});
// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)
$.cookie('noShowDonation', true);
});
}
});
EDIT #2 -- Updated code
Using the code suggested by #Rob below, I tried adding the configurations to the fancybox as well as the timeout, however, no luck. Here's the JS Fiddle: https://jsfiddle.net/30Lxfc6r/

I've updated my answer with a JSBin example based on the FancyBox docs.
https://jsbin.com/bajocosese/edit?html,console,output
http://fancyapps.com/fancybox/#docs
$(function () {
// Define cookie name
var cookieName = 'hide_donate';
// Configure fancyBox
$('.fancybox').fancybox({
autoDimensions: false,
autoSize: false,
height: 'auto',
padding: 0,
width: 650,
beforeLoad: function() {
// Returning false will stop fancybox from opening
return ! $.cookie(cookieName);
},
afterClose: function() {
// Set cookie to hide fancybox for 1 day
$.cookie(cookieName, true, { expires: 1 });
}
});
// Handle donate click event
$('a#donate').on('click', function (event) {
event.preventDefault();
// Hide fancybox and set cookie to hide fancy box for 7 days
$.fancybox.close();
$.cookie(cookieName, true, { expires: 7 });
});
// Launch fancyBox on first element
setTimeout(function () {
$(".fancybox").trigger('click');
}, 2000);
});
Remember, this example will only work once, unless you delete the cookie, or change the cookie name.

TypeError: $(...).load(...).appendTo(...).dialog is not a function

I am very new in JavaScript and jQuery. I have function where I am opening POPUP box on click and I am passing content value using href link.
This pop is working fine to me but sometime(after making few other calls on same page) when I click on link to open this POPUP I am getting script error in console and POPUP is starched (Showing whole page which is pass in herf instead POPUP box) :
TypeError: $(...).load(...).appendTo(...).dialog is not a function
$('', {
<link rel="stylesheet" href="code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"; />
<script src="code.jquery.com/jquery-1.9.1.js"></script>;
<script src="code.jquery.com/ui/1.10.1/jquery-ui.js"></script>;
<script type="text/javascript">
$(function() {
$('a#vehicle').on('click', function(e) {
e.preventDefault();
$('.mask').width($(document).width());
$('.mask').height($(document).height());
$('.mask').show();
$('<div/>', {
'class' : 'myVehicleClass',
'id' : 'link-' + ($(this).index() + 1)
}).load($(this).attr('href')+ "?random=" + Math.random()*99999).appendTo('body').dialog({
'title' : "Select a vehicle",
'width' : 600,
'height' : 500,
close : function(event, ui) {
$(this).dialog("close");
$(this).dialog("destroy");
$('.mask').hide();
}
});
});
});
I checked this issue on StackOverfolw and there are many related question on there but no worked to me :(

Jquery modal box to open a link and be degradable

I had a couple of questions in regards to a modal box plugin which I have found online. The code for my link is below:
<li><span id="label">Country: </span><span id="strong">United Kingdom</span>
This is what I want to use to trigger the opening of the modal box but I can't work out how I point the link to the modal box, importantly so that if javascript is still disabled, it will still link to another page. I think e prevent default is what I need but I am not sure.
// Modal Box
// Version 0.1
(function ($) {
$.fn.extend({
leanModal: function (options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
}
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function () {
close_modal(modal_id);
});
$(o.closeButton).click(function () {
close_modal(modal_id);
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$('#lean_overlay').css({
'display': 'block',
opacity: 0
});
$('#lean_overlay').fadeTo(200, o.overlay);
$(modal_id).css({
'display': 'block',
'position': 'fixed',
'opacity': 0,
'z-index': 11000,
'left': 50 + '%',
'margin-left': -(modal_width / 2) + "px",
'top': o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
'display': 'none'
});
}
}
});
})(jQuery);

I will try to explain to you how does it work.
You need two parts. Element, that will trigger modal box and element that is modal box.
This two parts are connected with href, as you understood well. Now the tricky part is, that first character in href has to be "#". Also modalbox id has to be same as href, except "#" character. Here is the code:
<a href="#my-first-modal-box" id="country_link">
<span id="label">Country: </span><span id="strong">United Kingdom</span>
</a>
<div id="my-first-modal-box"> This is what appears in modal box </div>
Now javascript/jQuery code. You will simple call function on a href:
$(document).ready(function() {
$("#country_link").leanModal();
});
Now after click on link, modal box will appear. Because link start with #, it doesnt call new page or page reload ;) (yes it is tricky part). Also I suggest to you to put this modal box in your html code directly under the link. So if javascript is turned off, then modal box is just simple div under the link and it is always visible. So your javascript will look like this:
$(document).ready(function() {
$("#my-first-modal-box").hide(); // this will hide modal box with javascript.
// It appears only if you click on link and it
// is visible if javascript is turned off
// you can add some options, like close buttons
var myCloseButton = $("<div class=\"close-button\"></div>");
// you append close button only if it is with javascript
myCloseButton.appendTo("#my-first-modal-box");
$("#country_link").leanModal({ closeButton : myCloseButton });
});

Changing url when opening and closing fancybox

I am using this code with fancybox 1.3.7. When fancybox opens url changes to the corresponding div (/page#div-id), when it closes it is supposed to go back to /page but the commented function doesn't work. I had to use a temporary value as shown below. How can I fix this?
window.onload = function(){
function showfb(id) {
if (/^#.*/.test(id)) {
$(id).show();
$.fancybox({
href: id,
type:'inline',
position: 'center',
'transitionIn': 'fade', // elastic, none, ease, fade
'transitionOut': 'fade',
onClosed: function(){
//$(id).hide();
window.location.hash = "_"; // temporary
}
});
}
}
showfb(location.hash);
$('a.profile').click(function(e){
showfb($(this).attr('href'));
});
};

Try replacing the function with the below:
window.location.hash = "";

Create a Jquery animation like Flipboard popup

I want to implement a Jquery/JS animation like the Flipboard popup animation.
When user clicks on an image, the image will expand to a certain size and its white background expands until it occupies the whole screen.
Once the animation is done the page content will be loaded.
http://flipboard.com/
Any help regarding this will be appreciated.
Thanks a lot!

Codrops did it a few months back, I can't really write out all the code for you here but give this article a read.

<script>
//Finally I found the answer. This is the full code.
$(document).ready(function() {
$('.box').click(function(e){
if( $('div').hasClass('overlay')==false ){
//event.preventDefault();
var $box = $(this);
$('<div class="overlay"></div>').prependTo($box);
var $overlay = $('.overlay');
$overlay.css( {
'position' : 'absolute',
'background-color' : 'white',
'width' : $box.outerWidth(true),
'height' : $box.outerHeight(true),
'left' : $box.offset().left,
'top' : $box.offset().top,
'z-index' : 99999999
});
//$($placeholder).insertAfter('.box');
$overlay.animate({
width: $(document).width(),
height: $(document).height(),
left: '0px',
top: '0px'
}, 500, function() {
//reset the overlay
$overlay.css({'width': ''});
$overlay.css({'height': '1500px'});
//ajax
$.ajax({
type: "POST",
url: "../ajax/get_event.php",
data: "firstname=clint&lastname=eastwood",
success: function(resp){
// we have the response
$overlay.html(resp);
$('.window').fadeIn(200);
},
error: function(e){
alert('Error: ' + e);
}
});
});
}else{
//click only on overlay to exit
var $target = $(e.target);
if ( $target.is('.overlay') ) {
$('.overlay').remove();
}
}
});//end box click
});//end of jquery
</script>

Codrops have just posted a plugin to do this, and instructions on how to use it. Theres a particularly cool demo of the plugin here.