Example: http://vincent-massaro.com/map/
Currently, the script allows you to click on a piece of the accordion to open it, but it is set to close on mouseleave. When I set the mouseleave to .click, it gets confused and doesn't know what state it is in. I want to make it so that you can click to open it, and click to close it, instead of mouseleave. The code controlling this is below, and the full script is in haccordion.js linked in the page source. If someone could help me modify this script, I would be very grateful! Thanks in advance.
$target.click(function(){
haccordion.expandli(config.accordionid, this)
config.$lastexpanded=$(this)
})
if (config.collapsecurrent){ //if previous content should be contracted when expanding current
$target.mouseleave(function(){
$(this).stop().animate({width:config.paneldimensions.peekw}, config.speed)
})
}
try use this
$('.accordion-item-header').click(function() {
var item = $(this).parent().find('.accordion-item-body');
item.toggleClass('open').animate({
width:item.hasClass('open') ? 0: 100
}, 100).toggleClass('open');
});
You could set a boolean variable to represent whether the accordion is open or not and just check it on click. (You'll need to toggle the variable's state on click too)
Edit:
Ok try this. Set a boolean global variable (outside the click event) like this:
var accordion_expanded = false;
Then within your click event do something like this: (I haven't tested this so you might have to massage it a bit to fit your circumstance)
In the function where you expand your accordion put this:
accordion_expanded = true;
And in the function where you contract your accordion do a
if(accordion_expanded == true){
//Contract accordion code goes here
accordion_expanded == false;
}
Good Luck!
Related
I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question
Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.
$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it
Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy
I'm new to jQuery and am trying to make a menu for a catering business and figured using jQuery would be the easiest way to implement what I am trying to do.
There is a catering menu and a dessert menu, I want to have them both hidden when the page loads but when a button, either catering or dessert, is clicked, show the appropriate menu. i can get it to hide them, but not sure how to get them show show on the button press.
Thanks!
var $cateringMenu = $("#cateringMenu");
var $cateringButton = $("#cateringButton");
var $dessertButton = $("#dessertButton");
var $dessertMenu = $("#dessertMenu");
function hideMenu(){
$cateringMenu.hide();
}
function showCateringMenu(){
if($cateringButton.click() ){
$cateringMenu.show();
}
}
hideMenu();
showCateringMenu();
Check out the documentation for the jQuery click method here: https://api.jquery.com/click/
This method will set up an event handler for the particular element. You can use it like this:
$cateringButton.click(function() {
$cateringMenu.show();
});
That will only cover half of the situations (when the menu is hidden). You'll have to add some additional logic that checks if the menu is hidden or shown and acts accordingly (or might want to check out the toggle method here: http://api.jquery.com/toggle/), but hopefully this is enough for you to continue!
Try it this way:
$(document).ready(function(){
$("#cateringMenu").hide();
$("#cateringButton").click(function(){
$("#cateringMenu").show();
});
});
The toggle() jQuery method was designed for exactly this:
jQuery:
<script>
$(document).ready(function(){
$("h1").click(function(){
$("p").toggle();
});
});
</script>
HTML:
<h1>Desert menu</h1>
<p>lots of deserts</p>
The documentation here explains its use pretty well. It takes care of the visibility checking you would otherwise have to do.
I have a notifications dropdown menu that should be closed when you click anywhere outside of it. The following code was working great until I ran into a new situation:
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.notification-area') && !$(target).parents().is('.notification-area')) {
$('.notification-area .flyout').removeClass('flyout-show');
}
});
However (and I'm using Backbone if that's relevant), some elements cause part of the menu to re-render. That is to say: remove and rebuild a part of the DOM.
Obviously you can't tell where an element is within the DOM if it's already been removed. So now, if there's a click that causes part of that view to re-render then that bit of code that checks the parents() of the element returns no parents.
Then I thought I might be able to solve it by checking if the length of parents() is greater than 0.
...
if (!$(target).is('.notification-area')
&& !$(target).parents().is('.notification-area')
&& $(target).parents().length > 0)
...
And this works but I wonder what side effects it could have. Is this the best way to do this?
Hope I understood your question correct. You want some simple way of not shutting the notification area if clicked upon it. But close it when clicked on body?
One way to do these kind of things is somewhat like this.
mouseOverArea = false; // This will be globally set, right away
$('.notification-area').mouseenter(function(){
mouseOverArea = true;
}).mouseleave(function(){
mouseOverArea = false;
});
And then when you click on body or whatever, you simply check if mouseOverArea == false... If so, close the notification box, otherwise return false, e.preventDefault(); or whatever fits your coding.
You can simplify this using closest() since it includes both the target and ancestors.
It turns :
!$(target).is('.notification-area') && !$(target).parents().is('.notification-area')
Into a simpler to read:
!$(target).closest('.notification-area').length
reference: closest() docs
my problem is following:
I got a trigger(a) and a popup(div). The div doesn't lie nested inside the anchor.
When I hover over a, I want the div to show up.
When I go from a to the div, I want it to stay visible.
When I leave the div, I want it to close.
When I hover over a and leave without entering the div, I want the div to close.
I got most of that figured out, but now I'm struggeling with requierement no. 2.
When checking for mouseleave on a, I check if there is a mouseenter on the div. If it is, I want to abort the mouseleave. If not, I want to close the div.
What am I doing wrong? Is this even the right way to do this?
Here's the markup:
<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>
Here's the jQuery:
$('.popup_toggle').mouseenter(function() {
var element = $(this).next('.popup_div');
$.data(this, 'timer', setTimeout(function() {
element.show(100);
}, 500));
});
$('.popup_toggle').mouseleave(function() {
clearTimeout($.data(this, 'timer'));
if($('.popup_div').mouseenter==true)
{
return false;
}
else
{
$('.popup_div').hide(100)
};
});
What you're trying to do is fairly simple. When entering the trigger, identify the panel (layer, popup, whatever), save reference to each other using .data() and have the event handlers check if the related targets are either the trigger (from the panel view) or the panel (from the trigger view). I threw something together. Have a look at the console log to see how this works… http://jsfiddle.net/rodneyrehm/X5uRD/
That will most likely not work...no. I would suggest that you add a mouseenter and mouseleave callback to you <div> element as well and have them set a global variable that tells your other callbacks how to handle their events, i.e. "if global variable is true, don't hide the popup on mouseleave, otherwise hide popup" or something like this.
The other approach would be to check whether the mouse is inside the popup when the mouseleave callback tries to hide the popup. That might be much more work than it is worth though.
I believe the problem with your implementation is that the mouseenter on the div will fire shortly after the mouseleave from the a.
This would give you something like:
$('.popup_toggle').mouseenter(function() {
// Clear any pending "hide" timer
// Set a show timer
});
$('.popup_toggle').mouseleave(function() {
// Clear any pending "show" timer
// Set a hide timer
});
$('.popup_div').mouseenter(function() {
// Clear any pending "hide" timer
});
Note that you'll have to make sure that you access the same timer from both the .popup_toggle event and the .popup_div event. You may want to consider using Ben Alman's doTimeout plugin to help with this. It (usually) results in much clearer code than manually working with setTimeout/clearTimeout.
I have the following jQuery:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle();
$("#account-link").toggleClass("selected");
});
What I want to do is check if the user clicks anywhere else onscreen WHILST THE ACCOUNT MENU IS SHOWN BUT not within the account menu itself, and if so then hide the menu. Can anyone help?
Thanks
EDIT:
I had a go at doing this myself like so:
$('#account-menu').hide();
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu").toggle('fast');
$("#account-link").toggleClass("selected");
});
$(document).mouseup(function(e) {
var $targ = $(e.target);
// if we are the link or the box, exit early
if ($targ.is('#account-link') || $targ.is('#account-menu')) return;
// if we have a parent who is either, also exit early
if ($targ.closest('#account-link, #account-menu').length) return;
// hide the box, unselect the link
$("#account-link").removeClass("selected");
$("#account-menu").hide('fast');
});
But wanted to see if there was a nicer and much smaller (code-wise) way of doing it.
Use jQuery to hide a DIV when the user clicks outside of it
Maybe something like this...
$('#account-menu').hide();
$('body').click(function(){
$("#account-menu:visible').toggle();
$("#account-link").removeClass("selected");
});
$("#account-link").click(function(e) {
e.preventDefault();
$("#account-menu:not:visible").toggle();
$("#account-link").addClass("selected");
});
UPDATE
So this won't fully work, since the body click triggers when you click the link too. This is a step in the right direction though. G/L
UPDATE #2
I finally got this working over on JSFiddle.net, using the comments from Joseph Le Brech (+1). Check out the live Demo. I could not get the $('body') selector working on there, so I am simulating the body with a div called bodyDiv. It's all commented and working 100%. Happy Coding.