I have a jquery fancybox with a normal a href link inside it. When I click on that link the fancybox closes. How can I prevent the fancybox to close after I clicked on the link?
This is the code for the fancybox:
$(function(){
$(".booking_module").fancybox({
maxWidth : 550,
topRatio : 0,
fitToView : false,
width : '100%',
height : 'auto',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
centerOnScroll: true,
autoResize: true,
autoCenter: true,
margin : [topmargin, 0, 0, 0],
helpers : {
overlay : {closeClick: false}
}
});
});
This option will disable closing fancybox when clicking on the background
$(document).ready(function() {
$(".booking_module").fancybox({
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
}
});
});
and this option will disable all default click methods of closing fancybox
$(document).ready(function() {
$(".booking_module").fancybox({
closeBtn : false,
closeClick : false,
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
},
keys : {
close: null
} // prevents close when clicking escape button
});
});
i think the second option is what you're looking for. Maybe without the "closeBtn"
The problem was that I was using 3 classes for the a href. One of those classes was not used anymore. When I removed that un-used class it didn't close anymore after clicking on that link.
Related
Update: Now it popups from a specific referer =)
Here is my fancybox code:
if (document.referrer) { //if for the referrer
referrerone = /referrersite.com/;
if (referrerone.test(document.referrer)) {
$(document).ready(function(){
$(".fancybox").fancybox({
});
$(".various").fancybox({
hideOnContentClick: true,
showCloseButton: false,
transitionOut : 'none',
transitionIn : 'none',
}).trigger('click');
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
}
}
I want to add some static rules like the Popup plug-in for wordpress allows:
-Fancybox will auto close after some seconds.
-Not from an internal link: Shows the PopUp if the user did not arrive on this page via another page on your site.
You can use
document.referrer
to get the last page which your page has been loaded from
I am using fancybox 2 and am appending html content to the modal. I turned of scrolling, and now the content that overflows the modal is hidden. Is this a problem with the max-height of the modal? How do I fix this?
My Code:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You have multiple possible reasons this is breaking.
We need more info for a definitive answer, but here are some likely/possible reasons.
Try a few of these parameters:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'height' : 1000, <--- Try these one at a time
'autoHeight' : true, <--- Try these one at a time
'autoResize' : true, <--- Try these one at a time
'fitToView' : true, <--- Try these one at a time
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You can read the full plugin options documented here:
http://fancyapps.com/fancybox/#docs
I am using fancybox on a page, but I'm using it as more of a design feature than a jQuery modal. I am trying to stop the user from being able to close it (as it will "break" the design of the page). I have managed to stop the user from clicking off fancybox, but I am having trouble stopping it close when the Esc key is pressed. I have tried 'closeOnEscape': false but this doesn't seem to work. Below is my code. Any suggestions as to what I am doing wrong or what I need to do?
$(document).ready(function () {
$.fancybox({
'width': '340px',
'height': '100%',
'autoScale': true,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'href': 'form.php',
'hideOnContentClick': false,
'closeBtn' : false,
'helpers' : {
'overlay' : {
'closeClick': false,
}
}
});
});
Check the keys option from fancyBox docs:
keys
Define keyboard keys for gallery navigation, closing and slideshow
Object; Default value:
{
next : {
13 : 'left', // enter
34 : 'up', // page down
39 : 'left', // right arrow
40 : 'up' // down arrow
},
prev : {
8 : 'right', // backspace
33 : 'down', // page up
37 : 'right', // left arrow
38 : 'down' // up arrow
},
close : [27], // escape key
play : [32], // space - start/stop slideshow
toggle : [70] // letter "f" - toggle fullscreen
}
Just map the close value to null.
If you are using fancyBox2, add this property to your code:
$.fancybox({
// all your other options here
...,
keys : {
close : null
}
}
#moonwave99 has the correct answer for fancybox2.
If you are using v1.3+ then you must use:
enableEscapeButton: false
Ref: http://fancybox.net/api
As others have mentioned in comments, modal: true works perfectly...
$.fancybox({
modal: true
});
From the docs...
modal - If set to true, will disable navigation and closing.
Not sure what the catch is but in FF the video keeps playing. All other browsers close when you click outside of fancybox... the embeded Youtube Video will stop playing as well. Firefox seems to ignore this. What am I doing wrong?
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
});
});
$("#fancy_content").empty();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0,
opacity: 0.3,
css: {'background-color': '#cdc3b7'}
}
}
});
});
You don't have to initialize the same .fancybox selector twice. In other words, you don't have to do :
$(".fancybox").fancybox({
// options
});
... and later :
$(".fancybox").fancybox();
#fancy_content is not a valid fancybox selector (at least not for v2.x)
$("#fancy_content").empty(); is outside of the .ready() method. Anyway is useless as explained above.
callbackOnClose is not a valid API option (use afterClose instead if needed)
This script works perfectly fine cross-browser :
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
/*
// yo don't need this
,
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
*/
});
... as you can see in this JSFIDDLE. Make sure you test it with FF (works fine with my FF v17.0.1)
jquery accordion should open while page loading.
after page loading complete accordion should compact automatically.
jQuery().ready(function(){
jQuery('#portslid').accordion({
collapsible: true,
autoheight: false,
alwaysOpen: false,
active: false,
animated: "bounceslide"
//animated: 'easeslide'
});
});
If you want the accordion to be open at page load you should change the active option to the element that you want to be open :
jQuery().ready(function(){
jQuery('#portslid').accordion({
collapsible: true,
autoheight: false,
alwaysOpen: false,
active: 1,
animated: "bounceslide"
//animated: 'easeslide'
});
});
And then at the load you close it :
jQuery(window).load(function(){
jQuery('#portslid').accordion({active: false});
});
EDIT : The jquery accordeon does not support to be all open , but there's work around like here : jQuery Accordion expand all div