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.
Related
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
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 have the following fancybox code:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.
I have tried several things, none of them have worked!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works.
Without each() or click() simply add the beforeLoad callback to your script like this
$(".fancybox").fancybox({
autoScale: false,
// href : $('.fancybox').attr('id'), // don't need this
type: 'iframe',
padding: 0,
closeClick: false,
// other options
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
}); // fancybox
NOTE: this is for fancybox v2.0.6+
On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id attribute for what is meant for.
EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
See JSFIDDLE
You can iterate over your collection of .fancybox items and grab the id.
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
Try this:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})
Try this
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);
Have you tried this?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
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>