I have an application which uses Fancybox and calls it from 'a' tags as follows:
<a class="link" href="#" data-fancybox="" data-type="ajax" data-src="favourite_record.php" >Link</a>
Within 'favourite_record.php is a 'div' with ID 'modal-fvourite-record' which contains a 'form'.
I need the Fancybox to not close when the within the Fancybox when the 'submit' button is clicked.
<button data-fancybox-close="" type="submit" id="f-submit-button" onclick="Save();">Save</button>
I've tried to handle this by adding the following JS code inside 'favourite_record.php':
<script type="text/javascript">
$('#modal-favourite-record').fancybox({
beforeClose: function(instance, current, e) {
return false;
}
});
function Save() {
document.favourite_record.submit();
}
</script>
However when I open the Fancybox from the 'a' tag and click within the Fancybox, it opens a second Fancybox on top.
How can I specify the 'beforeClose' functionality without it opening a second Fancybox?
Related
The main problem I'm looking at right now is the next/previous buttons are not working as expected after featherlightGallery() has been called more than once - The first click on the next button always shows the first image while the previous button always shows the 2nd to last image.
GitHub
The idea is to show the first 4 thumbnails from a gallery on a page.
When one of these thumbnails is clicked, the (hidden) gallery opens via featherlight, a click is triggered on the related image in the gallery, and the gallery behind the image is closed. This leaves the viewer with the image they clicked and the next/previous buttons. (ignore the lack of styling!)
Every time these thumbnails are clicked, the next/previous buttons work as expected, displaying adjacent images in the gallery.
The first 4 images from the gallery shown on the page: (# is substituted for actual numbers. The data-click attr is used in JS to trigger a click on the related gallery image)
<div id="intro-gallery">
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
</div>
Clicking this link opens the featherlight div without triggering any clicks or hiding the gallery (with JS).
<p><a class="link" href="#main-gallery-container">Gallery</a></p>
The first time the link is clicked, the gallery is shown and the user clicks a thumbnail, the next/previous buttons work as expected. Since the gallery is hidden after user clicks a thumbnail, they need to click the Gallery button again to see all the thumbs - at this point, after clicking another thumbnail, the next button always shows the first image and the previous button shows the 2nd to last image. Seems like the current image is set to the last image in this case.
Inside this #main-gallery div are 12 .gallery-item divs (1 shown for brevity).
<div id="main-gallery" data-featherlight-gallery data-featherlight-filter=".mgi">
<div class="gallery-item">
<a class="main" id="gi-#" href="#mgi-#">
<div class="thumb-holder" style="background-image: url('img/{$x}.jpg');"></div>
</a>
<div class="mgi-wrapper">
<div id="mgi-#" class="mgi">
<div class="mgi-image" style="background-image: url('img/#.jpg');">
</div>
<div class="mgi-text">
<p>Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
JS
"use strict";
(function ($) {
$(function () {
$('a.link').click(function (e) {
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
}); // Add link to view gallery, bind click.
$.featherlightGallery.prototype.afterOpen = function () {
var link = $('<span class="single-gallery-link"><a class="link" href="#main-gallery-container">View Gallery Images</a></span>');
$('.featherlight.single .featherlight-content').prepend(link);
$(link).click(function () {
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
});
};
$('a.intro').click(function (e) {
e.preventDefault();
initGallery(); // get ID from data-att of initial thumbnail
var id = $(this).data('click'); // Get same thumb in gallery and trigger a click
var thumb = document.getElementById(id);
$(thumb).click();
});
$('#link').click(function (e) {
e.preventDefault();
initGallery();
});
var switchToGallery = function switchToGallery(e) {
// prevent triggered click
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
};
var initGallery = function initGallery() {
$.featherlight('#main-gallery', {
variant: 'onclick',
afterOpen: function afterOpen() {
$('a.main').featherlightGallery({
targetAttr: 'href',
variant: 'single',
beforeOpen: function beforeOpen() {
$.featherlight.close();
}
});
}
});
};
});
//https://stackoverflow.com/a/52611202/774793
//$.featherlightGallery($(".column"), {$currentTarget: $('the first item, maybe this in your case?')});
})(jQuery);
//# sourceMappingURL=index.js.map
EDIT: I don't like posting URLs with a limited lifespan here but for the sake of solving the problem - temporary example
The library is confused, $.featherlightGallery.current().$currentTarget[0] seems to be a detached copy and not part of $.featherlightGallery.current().slides() so navigation is lost.
I'm not too sure what is going on and don't have the time to delve into it further.
I would try with persist: true. Also looks like you are constantly re-initing the gallery, you should bind it once.
I am using Twitter Bootstraps "dropdown menu" on WordPress for some widget I created and it works fine. But I want to change the icon to "minus" when it drops the content and when another "plus"-icon is clicked the "minus" should close. At the moment it will only toggle the current "plus".
<div class="dropdown toggle-details">
<img src="">
<h3>title</h3>
<h4><subtitle</h4>
<a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu" >
<li> <h6>item 1</h6></li>
<li><h6>item 2</h6></li>
</ul>
</div>
my script is
jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});
You're missing a dot in your jQuery, so right now jQuery is looking for an html element with tag name fa-minus-circle within the "a" element. And obviously not finding it.
jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...
actually that probably won't fix it either, because after that statement you'll end up with both classes on the i element. I guess you could work around that with css, but cleaner would be to have the "i" element default to a + icon, and then toggle a more semantic class name like "open".
So css:
i { /* show plus icon */ }
i.open { /* show minus icon */ }
And jQuery:
jQuery("a").on("click", function() {
jQuery(this).find("i").toggleClass("open");
});
Heh - now that I just typed everything out I see what you were doing with that second statement. So yeah, you just need a dot so jquery looks for the classname not the element.
I have placed a form (built with entityform) into a modal (ctools modal) using jquery.
Now, what happens is that when I click on the "submit" button, I get redirected to another page where I display the "success" message.
I'd like to avoid the redirect and display the "success" message within the modal (in the same page where the modal pop up).
Thanks in advance.
This is the jquery I used to launch the modal on click:
(function ($) {
Drupal.behaviors.tuo = {
attach: function (context, settings) {
$('#comments_button', context).click(function () {
$('#suggerimenti').dialog('open');
$('.ui-dialog-titlebar').append($('h2', '#block-views-invio-suggerimenti-block'));
$('.ui-dialog-content').append($('form', '#block-views-invio-suggerimenti-block'));
});
$('#suggerimenti').dialog({
autoOpen:false,
minWidth:500,
});
}
};
})(jQuery);
And this is the html of the form created by Drupal:
<form id="prova-invio-entityform-edit-form" class="entityform entitytype-prova_invio-form" accept-charset="UTF-8" method="post" action="/tuo_tema_dev2/?q=content/blandit-ratis-usitas-valde">
<div>
<div class="pre-intructions"></div>
<div id="edit-field-suggerimento-new" class="field-type-text-long field-name-field-suggerimento-new field-widget-text-textarea form-wrapper">
<div id="edit-field-refer" class="field-type-entityreference field-name-field-refer field-widget-entityreference-autocomplete form-wrapper">
<div id="edit-actions--3" class="form-actions form-wrapper">
<input id="edit-submit--4" class="form-submit ajax-processed" type="submit" value="invia suggerimento" name="op">
</div>
</div>
</form>
You can add a hidden form value to your form when using the modal view (check if your ajax is set in the URL). Then in your submit function remove your redirect when the form value is present. Assuming it is set using $form_state using this line:
unset($form_state['redirect']);
We can give you more help if you attach your form code. That seems more relevant to me, for this problem, than your JavaScript.
I'm using a jquery menu UI. When the select function is triggered, a class is added to the selected item that highlights it with a color while unhighlighting a previous selection. Within that code I have a button that I want to alert the text value of the selection once the button is clicked. The problem isn't that I can't alert the value, it's that if I select something that is 3rd or 4th on the list, alert boxes will show for the previous third or second line items as well as the one that has been clicked. What code can I use to restrict the alert value down to only the selection that is highlighted with the class that adds color.
<script>
$(function(){
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
var selection = ui.item.addClass('selected').text();
$("button").click(function(){
alert(selection);
}); //closes click()
}// closes select function
});// closes menu
});
</script>
<ul class="menu" id="menu">
<li><img src="" alt="" /><h2>Academic: Art Studies</h2></li>
<li><img src="" alt="" /><h2>Academic: Literature</h2></li>
<li><img src="" alt="" /><h2>Academic: Social Sciences</h2></li>
<li><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></li>
</ul>
You are binding click event to the button multiple times on every select. Remove the button click binding and put it outside the menu function. See fiddle
$(function () {
var selection ;
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
selection = ui.item.addClass('selected').text();
} // closes select function
}); // closes menu
$("button").on('click', function () {
alert(selection);
}); //closes click()
});
Fixed thanks to helpers below, see it in action here: http://bit.ly/15npgSC
I am learning jQuery and have come across a problem which I cannot find a fix for. I have a content slider which when a button is clicked, it slides open, and when the button is clicked again, it closes. This is all fine, the problem I have is that the slider opens automatically when the page loads, not only when clicked. How can I keep it closed when the page loads and have it only open when clicked? It works fine afterwards, its just that as the page loads, it opens. I tried putting $(document).click(function() { at the start which kind of worked but then when clicked it would open and then close immediately after opening with no click. I changed back to the jQuery code below but now have the problem of it opening when the page loads again.
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}).click();
});
If you are able to fix this problem, could you explain why this occurs with my current code and why the fix stops that happening please?
Thanks, Rafa.
Sorry for not posting the HTML code before, but this is it:
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<div>
<p class="slide">Click to open!</p>
</div>
Because you did not post any HTML so I guess '.pull-me' is an 'a' element.
Pls try below code(remove .click()):
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to close!");},
function() { $(this).html("Click to open!");
}); // modified here
});
You are triggering click event when the page first load.
Try this:
// HTML
<div class="pull-me">
Click here!
</div>
<div class="panel">
show/hide
</div>
// jQuery
$(document).ready(function() {
$('.pull-me').click(function() {
$('.panel').slideToggle('slow');
});
$('a').toggle(function() {
$(this).html("Click to open!");},
function() { $(this).html("Click to close!");
});
});
check here in this JsFiddle -> http://jsfiddle.net/GXCuz/1/