I am having trouble getting Fancybox 3 to exit when a parent element or outside element is clicked.
Fancybox 3 options documentation (http://fancyapps.com/fancybox/3/docs/#options) states the following:
// Interaction
// ===========
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
// each option can be string or method that returns value.
//
// Possible values:
// "close" - close instance
// "next" - move to next gallery item
// "nextOrClose" - move to next gallery item or close if gallery has only one item
// "toggleControls" - show/hide controls
// "zoom" - zoom image (if loaded)
// false - do nothing
// Clicked on the content
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
// Clicked on the slide
clickSlide : 'close',
// Clicked on the background (backdrop) element
clickOutside : 'close',
Following is my JS file:
$("[data-fancybox]").fancybox({
loop : true,
toolbar : true,
buttons : [
'close'
],
clickOutside : 'close',
});
I am using the group option to enable a gallery.
data-fancybox="group"
I've tried a few things and just can't seem to get it to work yet. Help is greatly appreciated, take care. Sorry for lack of info, I have to head out.
It's hard to understand the problem (add codepen)
If you want - click on the image to close the gallery this is the code (change from "zoom" to "close" (Conditional (ternary) Operator))
// Clicked on the content
clickContent : function( current, event ) {
return current.type === 'image' ? 'close' : false;
},
Also you are doing wrong implementation. This is the default value:
clickOutside : 'close', /* i am default */
If you write this for example:
clickOutside : 'toggleControls',
Result: Now when you click on the overlay area (black) - show/hide controls.
Sorry for my English first. I hope I got you right. I just ran into similar trouble with a gallery of images. And I was irritated by the names of interaction options. For me worked option "clickSlide"
In that way you should be able to control what happens if you click on the open slide but outside the (Image-) Content. Instead of using 'toggleControls' you can use false.
Hope that helps
$("[data-fancybox]").fancybox({
clickSlide: 'toggleControls'
});
Related
I am trying to create a card that would have action on clicking "select" button and still have scrollable text, something like:
var card = new UI.Card({
title: 'Title',
body: 'long text goes here...',
action: {
select: 'images/refresh.png',
backgroundColor: 'white'
},
scrollable: true
});
card.on('click', function(e) {
if (e.button == 'select') {
//some code
}
});
if executed like this - icon in action bar is visible and "click" event runs, but "scrollable: true" no longer has effect. If I comment "action" property - "click" event still runs and this time "scrollable: true" is working, but of course no icon is displayed. Is it a bug or is it by design? How can I have best of both worlds - display icon for "select" and keep card scrollable?
Thanks to this question, I've made a commit that will allow you to use the action bar layer and scroll layer at the same time: https://github.com/pebble/pebblejs/commit/04f926f137395a0ebd0faaab8b0722da9aa75a7d.
I'll update this answer when the commit is merged into CloudPebble.
I have a html file whose skeleton is as follows:
<div id ="QBForm">
<h3>Query1</h3>
<div class ="QBSubForm">...</div>
</div>
I have a "AddQuery" button and on clicking that, I want to add another subform to the existing form and here's how I do that:
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
});
And I have this in my jQuery Ready() function:
$("#QBForm").accordion();
But every time, I click on my add query button, the subform is added but it is not collapsible, its just its own static thing.
How do I add a sub-form and make each sub-form collapsible?
You should try passing accordion with active: false and collapsible: true.
I haven't really tested the code below, but try:
$("#QBForm").accordion({ active: false, collapsible: true });
if you do not set collapsible to true, jQuery UI will set at least one section open.
Use refresh method of accordion to include dynamically added content.
Then if you want the new section opened you could also set the last panel to active by using -1 as index
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
/* only refresh*/
$("#QBForm").accordion('refresh');
/* refresh and set new panel active */
$("#QBForm").accordion('refresh').accordion( "option", "active", -1 );;
});
Accordion Refresh docs()
I followed the sidr documentation at: http://www.berriart.com/sidr/
And I already have my sidr side left menu working fine.
But on my mobile,only on android default browser, when I click in my link "Open Menu" I also click on my menu item "Menu 1", and so it opens my submenu items with my toggle effect. And I dont want this.
I just want to open my submenu items when I click in my Menu items, and not in my link to open the menu.
I found a solution, that is, if I put my sidr menu with some margin top, to not align with my link to open the menu, the problem is solved, like in my second image.
But I dont want to give that margin-top, so Im trying look for other solution.
Somebody there have exprience with this plugin and can give me a help??
(This only happens in mobile and on android browser that cames when you buy the smartphone, but I want to use this on mobile, and many users must use internet explorer which I think is the default browser for android.)
Like this image below, I have the problem, because the "Open Menu is aligned with "Menu 1" and so Im clicking on both!
Like this image below, I dont have the problem, because the "Open Menu is not aligned with "Menu 1" and so I only click on "Open Menu"!
This is my jQuery to start sidr plugin:
$(document).ready(function() {
$('#simple-menu').sidr({
name: 'sidr',
speed: 200,
side: 'left',
source: null,
renaming: true,
body: 'body'
});
});
$(document).ready(function() {
$('.sub-menu-sidr').hide();
$("#sidr li:has(ul)").click(function(){
$("ul",this).toggle('fast');
});
});
And here is my fiddle:
http://jsfiddle.net/y4CX4/1/
Easiest way to do that, IMHO is to prevent the first click on that link from happening, that is:
Define a variable to check if link was clicked, at click event check the value and prevent the event from propagating and then set the variable to something else, in order to allow all future clicks to happen naturally, for example:
var click = false;
$('#sidr > ul > li').first().find('a').first().click( function(e) { if ( click == false ) {
e.stopPropagation();
click = true;
} });
The next step would be to add a function that resets this variable when the menu gets closed by adding:
onClose : function() {
click = false;
}
An working example can be found here: http://jsfiddle.net/y4CX4/3/
Also make sure you use the same function in order to use the variable click properly ( in the fiddle you posted you used $(document).ready() two times for some reason ).
My solution to that problem is based on the top answer which helped me find the right way.
So I find all the links and prevent their default behavior until the menu is opened and then disable them again when the menu is closed.
var menuButton = $('.js-side-menu-toggle');
var sideMenuLinks = $('#sidr').find('a');
var canClick = false;
sideMenuLinks.on('click', function(e) {
if (!canClick) {
e.preventDefault();
}
});
menuButton.sidr({
onOpen: function() {
canClick = true;
},
onClose: function() {
canClick = false;
}
});
The tricky part here is that we need to change the plugin itself so that this code can work.
The problem is that the functions onOpen() and onClose() are called after the animation is done but not in it's callback function. That makes the functions to be called with the animation which is async and here is our issue.
Wrong:
// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
$menu.removeAttr('style').hide();
$body.removeAttr('style');
$('html').removeAttr('style');
sidrMoving = false;
sidrOpened = false;
// Callback
if(typeof callback === 'function') {
callback(name);
}
$body.removeClass('sidr-animating');
});
// onClose callback
onClose();
We just need to insert the onClose function inside the animation callback function in order to lock the links when the menu is closed and we should do the same with the on open code fragment.
Right:
// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
$menu.removeAttr('style').hide();
$body.removeAttr('style');
$('html').removeAttr('style');
sidrMoving = false;
sidrOpened = false;
// Callback
if(typeof callback === 'function') {
callback(name);
}
$body.removeClass('sidr-animating');
// onClose callback
onClose();
});
Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks
The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.
Is there an option to close a cluetip dialog when the mouse is moved off of the link? There is the mouseOutClose option, but it doesn't close the cluetip if you don't hover over it first.
Here is an example:
http://plugins.learningjquery.com/cluetip/demo/ - the first link under the jTip Theme
In the clueTips core file
replace the code:
if (opts.mouseOutClose) {....}
with
if (opts.mouseOutClose) {
var closectip;
$cluetip.hover(function() {
clearTimeout(closectip);
},
function() {
$closeLink.trigger('click');
});
$this.hover(function() {
clearTimeout(closectip);
}, function() {
closectip = setTimeout(cluetipClose, 1000);
});
}
I found the solution from a jquery forum here is the link
http://plugins.jquery.com/content/cluetip-doesnt-close-mouseout
Its working for me.
I had the same trouble, and I got a solution.
It's working.
So, what we all want is a way to
1- showing cluetip when link is hovered, then discard it when mouse goes out
2- BUT keep cluetip opened if the mouse did go inside so that it can click on links inside the cluetip
This is how to do it.
Just add this parameter :
sticky: true,
onShow: function(){
$('.mylink').mouseout(function() { // if I go out of the link, then...
var closing = setTimeout(" $(document).trigger('hideCluetip')",400); // close the tip after 400ms
$("#cluetip").mouseover(function() { clearTimeout(closing); } ); // unless I got inside the cluetip
});
}
This is it !
It's because the sticky option is set to true...