I've been searching how to auto-close off-canvas menu after some menu item is clicked but nothing seems to work.
So I followed guide on how to make off-canvas menu on Foundation 6 docs and it works. This part is okay. Now when I click on some link menu just stays there and I want it to close. Does anyone know how to fix that.
I've found snippet that should do the trick but my menu stops showing after I appy this JS. Others report the same problem.
$(document).foundation({
offcanvas : {
open_method: 'move', // Sets method in which offcanvas opens, can also be 'overlap'
close_on_click : true
}
});
Here are the docs, but since I don't know much about JavaScript I beg someone to write correct code.
You could use the close method on the .off-canvas menu when a link is clicked:
$('.off-canvas a').on('click', function() {
$('.off-canvas').foundation('close');
});
Click Here for a demo.
In advance, sorry for my poor english,
Just go through online to figure it out, and finally, the script above that Yass provided is working. But when i inserted Slick slider script in, it no longer worked.
i just found out a solution that worked for me, but maybe there have bug, dunno.
Inside foundation offcanvas documentation, a close button to close the canvas is given, like below showed.
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
So I adapted it and put the "data-close" to the link, when i clicked, it scroll to the specific div and close up canvas
And here is the link for more understanding? because i think my explanation sucks
https://jsfiddle.net/mbsj7d7p/
Related
I'm using wordpress with visual composer and I have built this demo popup example https://www.air8cushion.com/index.php/popup-test/ when I click on "More Info" button the popup shows up. However when I scroll content inside of it, and close the modal window, and again click on "More Info" I need to reset the content to appear from the top again.
I know its possible to do it with JS but I had fails many times to make it work. Most of examples of similar things online are mostly for Bootstrap and none of them worked for me.
Thanks.
You can use this on click of the close button of your popup
this function will scroll viewport of the popup div to top when clicked
jQuery(document).on('click','.vc_general',function(){
var myDiv = document.getElementById('myNav');
myDiv.scrollTop = 0;
});
".vc_general" is one of the class in your close button. You can add an extra class if you think it will affect the other functionality.
I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.
I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.
The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.
Their documentation is here: http://glightbox.mcstudios.com.mx/
The markup for the gallery is generated on the fly, and follows this structure:
<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
<div id="lightbox-slider">
<div class="gslide">
<div class="gslide-inner-content"><!-- image/text content -->
<img src="img/image.jpg" alt="">
</div>
</div>
</div>
</div>
Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:
// Close the lightbox
myLightbox.close();
I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:
var closeTheGallery = document.getElementsByClassName('.gslide');
closeTheGallery.onclick = function() {
myLightbox.close();
e.stopPropagation();
};
I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.
The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.
As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.
// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'current')) {
document.querySelector('.gclose').click();
}
}, false);
It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.
Posting the code here in case other folks using the GLightbox gallery run into the same thing.
I have a bootstrap modal in my web app that keeps being displayed even when I launch myModal.modal('close');. I am pretty stuck with that strange problem.
Approx. one in ten times, I have that display: block; staying after close. The modal is correctly hidden because I can't see it anymore but it is overlaying my entire page and I cannot click on anything.
I tried to handle the close with :
$('#myModal').on('hidden.bs.modal', function () {
$(this).css('display', 'none !important');
})
And this does not work, the modal div is still having style="display: block;"
Try these and let me know if they work.
$('selector').css('z-index', '-999');
$('selector').css('margin-left', '-50000');
$('selector').css('margin-top', '-50000');
My first question is: do you have a custom style sheet where you might be overriding the style for #myModal? If so, work to resolve that.
My second question is: what version of Bootstrap are you using? I have seen a bug logged similar to this back in 2012. If possible, upgrade to the latest version of Bootstrap (3.3.4).
My third question is: what are you clicking to do the close? Is it the close button ( type="button" class="close" ) or is it a button with a data-dismiss="modal" attribute?
If the close button, you could try this as long as you don't have other modals on the page:
$(".close").on( "click", function() {
$("#myModal").hide();
});
This might be worth a shot, too (though, not the recommended approach):
$("#myModal").on("hide",function(){
$("#myModal").css("display", "none");
});
Ultimately, I agree with needing a demo as Amit and Yerko suggest as this seems odd. I have never run across something like this, and I have used bootstrap for a long while.
Alright, so I've got this js code:
jQuery(".toggle-panel").click(function() {
jQuery('#collapsible-element').collapse({
toggle: true,
});
});
I assume it should open and close #collapsible-element but it can only close it. This #collapsible-element has also classes "collapse in" attached by myself in code. With first click on .toggle-panel it closes the #collapsible-element, but the second click does not open it again. Am I missing something?
You don't need any additional JavaScript code for toggle if you are using bootstrap. check out the following:
http://getbootstrap.com/javascript/#collapse
I have an almost working script but I don't understand scripting too good to make it work on all links.
When you have a look at my fiddle, and you click on the first two links, all work fine.
When you click on the other two ones the other content fields don't close. I need to close all, open just one..
http://jsfiddle.net/fourroses666/8y7Sr/100/
This is a part of the script:
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
$('#box-bureau').animate({'bottom':'-600px'},800,function()
{
$('#overlay-bureau').fadeOut('fast');
});
});
i actually don't need the overlay
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/