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.

JQuery UI Dialog shows on page instead of popup

I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.
var edit_div=document.createElement('div');
var me = this;
$(edit_div).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:
$(document).ready(function()
{
mfg_table.init();
}
And the init code to create the dialog
this.init = function()
{
//alert('initing');
var me = this;
$('#' +this.table_id + this.edit_table_name).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
}
So why can't I create the dialog on the DOM object before rendering of the page?

Is it possible your script is being called before your jquery.js files are being loaded by the browser?
Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.
You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.
I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.

Close kendo window from page loaded into the window

I have a kendo window which is open as iframe and loads a page.
How can I close that window from a button (or by registering a startup script) from the loaded page?
Specifically I have the kendo window as below:
var win = j$("<div />").kendoWindow({
iframe: true,
actions: ['Close'],
draggable: true,
modal: true,
resizable: false,
title: title,
width: width,
height: height,
close: onClose,
content: 'mypage.aspx',
visible: false /*don't show it yet*/
}).center().open();
How can I close this window from mypage.aspx?
Thank you

It depends - if, for example, you have buttons inside your page, and you know the id beforehand, you can use the refresh event (which is triggered when the content has finished loading) to attach a close handler (fiddle):
var win = $("<div />").kendoWindow({
iframe: true,
actions: ['Close'],
draggable: true,
modal: true,
resizable: false,
title: title,
width: width,
height: height,
close: onClose,
content: 'mypage.aspx',
refresh: function () {
var that = this;
var iframe = $(this.element).find("iframe");
// find the element, e.g. a button you want to close with
var button = $(iframe).contents().find("#my-button");
$(button).click(function() {
that.close();
});
},
visible: true
}).data().kendoWindow.center().open();
As an alternative, you could access window.parent from within your iframe to get access to the Kendo Window, or to a close function you have defined in the parent window.
Note that this will only work if the content is served from the same domain, subdomain and port (same-origin policy).

jQuery UI dialog box does not appear

I'm pretty much a total noob to JavaScript and jQuery and I'm having trouble getting a basic dialog box working. Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
dialog.hide();
});
function showDialog() {
$("#dialog").dialog("open");
}
$("ui-widget-overlay").click(function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
</script>
<div id="dialog">
Dialog text.
</div>
<button onclick="showDialog()">Show Dialog</button>
When I click the button, the title bar of the dialog comes up and the background of the page dims, but there are two problems:
The body of the dialog does not show (all that shows is the title bar)
When I click outside of the dialog, the dialog does not close. I have to click the "x" in the corner in order for the dialog to close.
I've been reading tons of related questions on here, but nothing I try seems to work. Any advice?

I believe the problem you're having is from this line:
dialog.hide();
What I would suggest is removing all of the dialog content from the dialog div and populating it when you actually show the dialog.
<div id="dialog"></div>
function showDialog()
{
$("#dialog").html("Dialog Text.");
$("#dialog").dialog("open");
}
As for handling the close part, have you tried nesting everything in the main page in a <div> of its own and then handling that click event?
<div id="mainPageDiv">
</div>
$("#mainPageDiv").click(function(){
$("#dialog").dialog("close");
});

Just use a modal dialog and close the dialog when they click the overlay. Also, you should not need to put any code in $(document).ready for this.
function showDialog() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
open: function () {
$('.ui-widget-overlay').bind('click', function () {
dialog.dialog('close');
});
}
});
}
Demonstration

I see your:
$("ui-widget-overlay").click(
perhaps should select a class:
$(".ui-widget-overlay").click(
which does not happen as it does not exist, so you need to hook it to the document.
and the dialog.hide(); is not needed as it hides it automatically when it becomes a dialog
SO you should have:
$(document).on('click',".ui-widget-overlay", function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
more simply:(if you have no other dialogs you need to deal with this way)
$(document).on('click',".ui-widget-overlay", function() {
$("#dialog").dialog("close");
});
sample fiddle to show full reworked code: http://jsfiddle.net/GrFE3/2/

I am adding this as an additional answer as it goes about this differently, changing the markup, removing the in-line event handler in the markup, uses your button, and uses your dialog variable (differently than you, but...
<div id="dialog">
Dialog text.
</div>
<button id="showDialog">Show Dialog</button>
and the code for that markup:
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
$('#showDialog').click(function() {
dialog.dialog("open");
});
$(document).on('click', ".ui-widget-overlay", function() {
dialog.dialog("close");
});
});

Showing a loading animation for an iframe in a jQuery UI modal dialog

UI experts,
I'm trying to get a slow website loaded in an iframe within a jquery modal dialog, but I'm having trouble. This is my use case:
open a jquery dialog, with a single "loading..." gif
load a different URL in the background
once loaded, replace the gif with the URL
I'm able to open the URL directly with code as below:
var popup = $('<div id="popup123" class="dialog"></div>').prependTo('body');
popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
$('.dialogIFrame').attr("src", 'http://myslowsite');
$('.dialogIFrame').show();
popup.dialog({
modal: true,
title: 'Site',
width: 1000,
height: 500,
});
So my question is - how do I add a "loading..." gif to the mix? Should be possible - but I can't seem to figure out!
Thanks in advance!

Here is an example of creating an iframe, directing it to a site and performing a callback when it finishes loading: http://jsfiddle.net/74nhr/109/
$(document).ready(function() {
var status = $('#status');
var iframe = $('iframe');
status.val('Loading...'); // show wait
iframe.on('load', function() {
status.val('Done!'); // remove wait, done!
});
setTimeout(function() {
iframe.attr('src', 'http://www.archive.org');
},
1000);
});
​

See this. Hope it helps.. http://jsfiddle.net/CEJhb/1/
var popup = $('<div id="popup123" class="dialog"><img id="load" src="http://jsfiddle.net/img/logo.png" alt="loading..."/></div>').prependTo('body');
popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
var $iFrame = $('iframe');
$iFrame.load(function() {
$('.dialogIFrame').show();
$('#load').hide();
});
$('.dialogIFrame').attr("src", 'http://www.google.com');
popup.dialog({
modal: true,
title: 'Site',
width: 1000,
height: 500
});​