I have a page where the user will click the button then a fancybox popup will appear and in there is a php file that has all the fields you can update. What I want to happen is that after I press the update button the whole page will refresh and will close the popup. But what's happening is that after I press update only the popup refreshes. How could I do that?
in this page is where I echo all of the user info
emp_refer.php
<a id="various5" href="http://i-refer.elitebpocareers.com/refer/updateInfo.php">
<button class="button">Edit Personal Information</button>
</a>
<SCRIPT TYPE = "text/javascript">
$("#various5").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
</SCRIPT>
Then in the page 2 after the update I do this code and the popup only refreshes
echo "<meta http-equiv='refresh' content='0; url=emp_refer.php'>";
What you could do is :
In page 2, after the update run the fancybox.close() method instead of the meta tag like :
echo "<script>parent.jQuery.fancybox.close();</script>";
Then, in your fancybox initialization script (emp_refer.php page) add the onClosed callback to your API options and run location.reload() within it like :
$("#various5").fancybox({
'width': '75%',
'height': '75%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'onClosed': function () {
location.reload();
return;
}
});
NOTE: if you are using fancybox v2.x use the afterClose callback
Related
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.
I have searched enough in the Stackoverflow and i could not able to find a thread to answer my question.
Below is my scenario,
function openVideo(videoid,urlid){
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$("a#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("a#video_link").trigger('click');
return false;
}
Show video
So, i would like to set href value when i click the "openVideo" function not in the anchor tag itself.
Fancybox version: jquery.fancybox-1.3.4.pack.js
Please suggest on this.
If I understood your question correctly this should work for you:
Need to add an ID to the anchor:
Show video
The jQuery:
$("#showVideo").click(function () {
var videourl = 'http://localhost/ptchoice-local/welcome/video/2134sdf234532sdfs324234/1';
$("#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("#video_link").trigger('click');
});
Since the videoid and urlid were hard coded in your example, I did the same here. They can be variables if they need be -- just set them the same way.
You can do it this way.
function openVideo(videoid,urlid) {
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$.fancybox.open({
href: videourl,
type: 'iframe',
padding: 0
});
}
i'm call fancybox in this way:
$(".add_exc").fancybox({
maxWidth : 1000,
maxHeight : 600,
fitToView : false,
height : '70%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
where .add_exc is:
<a class="add_exc fancybox.ajax" href="ajax_content.php">
<img src="click.png" />
</a>
in the ajax content i have some checkboxes and i need to check inside the parent window if some elements are present so that i can check the checkbox inside fancybox.
If i load javascript content inside the ajax content, it will be discarded.
How can i solve? thanks!!
You could try with the fancybox callback afterLoad
$(".add_exc").fancybox({
// all other API options
closeEffect : 'none',
afterLoad : function(){
myFunction();
// or some jQuery
$variable = $(".selector:checked").val();
}
});
I am triggering the fancybox to open onclick like this:
$('.telefonosOtrosPaises').fancybox({
'type' : 'iframe',
'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
/*'easingIn' : 'easeInOutBack',
'easingOut' : 'easeInOutBack', */
/*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
});
but how can i just open it in my js code when i need it?
Instead of calling .fancybox on an element, call it like this:
$.fancybox.open(...)
Note this is fancybox 2 syntax, although it might work with v1
If you want to have it open on both onclick and when prompted in your code, just call click on the element you've attached it to.
$('.telefonosOtrosPaises').click();
you can just call yourControl.click() to simulate a click event.
That way you can call it whenever you want it :)
According to Fancybox's blog, you can try something like this:
$.fancybox(
$('.telefonosOtrosPaises'),
{
'type' : 'iframe',
'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
/*'easingIn' : 'easeInOutBack',
'easingOut' : 'easeInOutBack', */
/*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
}
);
This can be done very easily:
<div id="divFancy" style="display: none;">
FANCY BOX CONTENT GOES HERE
</div>
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'href': '#divFancy'
});
});
</script>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#target').click(function() {
$('.telefonosOtrosPaises').fancybox({
'type' : 'iframe',
'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
/*'easingIn' : 'easeInOutBack',
'easingOut' : 'easeInOutBack', */
/*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
});
});
});
</script>
<input type="button" id="target" value="press me"/>
</body>
</html>
I am trying to start a PHP program in an overlay fancybox window. The fancybox window flashes, but won't come into focus. Can I start PHP program through fancybox?
Here is code:
jQuery(document).ready(function(){
$("a.php-overlay").fancybox(
{
'width' : 600,
'height' : 500,
'type' : 'iframe',
'scrolling' : 'yes',
'hideOnContentClick' : false,
'href' : 'http://example.com'
});
});
$('#hiddenclicker').trigger('click');
Shouldn't you trigger
$('a.php-overlay').trigger('click')
?
I believe what you may be trying to do is this:
HTML:
<a class="php-overlay" href="http://example.com">Open example.com in FancyBox</a>
JavaScript:
$("a.php-overlay").fancybox(
'width' : 600,
'height' : 500,
'type': 'iframe'
});
Fancybox will automatically attach an onClick event listener for you.