I have a dropdown dropdown using ul and li:
<img class="options_toggle" src="assets/down_arrow.png"onclick="toggle_display('options');"/>
<ul id="options" class="options_content hide">
<li>
option one
</li>
</ul>
the options_toggle function swaps back and forth between the "hide" and "show" class in the options ul. Now I want to only hide it when the user clicks anywhere except the options toggle:
$(document).ready(function () {
document.onclick = function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
$(".options_toggle").click(function (e) {
e.stopPropagation();
});
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
};
});
But the problem is that the first time they load the page they have to click somewhere once before clicking the toggle. After the first click it works fine, they just have to click twice at first which can be annoying.
Any ideas what it's doing and why it cancels or ignores the first toggle? Thanks.
It's usually wrong to add an event handler inside another event handler. Just bind your $(".options_toggle").click() handler at top-level.
$(document).ready(function() {
$(".options_toggle").click(function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
e.stopPropagation();
});
$(document).click(function(e) {
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
});
});
Related
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
I have some jquery to toggle a div to reveal some extra search fields on clicking a button. However those fields have an onchange event ("this.form.submit()" ) so every time they are used the div closes.
I guess I need to set some sort of cookie that keeps the div open until a reset button is pressed. The current script is
<script type="text/javascript">
$(function ($) {
var reveal_wrapper = $('.advancedsearch');
$('button.advancedsearchbutton').click(function () {
$(this).toggleClass('open');
reveal_wrapper.slideToggle(400);
return false;
});
});
</script>
You don't need any cookie... You can use variables to keep the div open/close.
Every time your onchange event is called you can test the status of your div. In the event you can choose to close the div or open
Use:
$('button.advancedsearchbutton').click(function (e) {
$(this).toggleClass('open');
reveal_wrapper.slideToggle(400);
e.stopPropagation();
return false;
});
See more about e.stopPropagation() here: https://api.jquery.com/event.stoppropagation/
I have an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});
You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);
Let's suppose that I have the following dropdown after the last div, a dropdown menu appears once he clicks.
<div id="test"> Arrow </div>
I want the user to be able to click on this element and the dropdown appear but also if he mid clicks to be able to open this link directly in a new tab. In other words I want to prevent the default action onclick but still show the link of the element on hover or whatever.
Thank you
you can do
<div id="test"> Arrow </div>
with jquery 1.7+
$('#test a').on('click', function (e) {
if (e.which < 2) { // left mouse button
e.preventDefault();
// and code to show dropdown
}
});
I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}
I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})
You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});