So this is what i want, take a look jsfiddle for example, I want 3 boxes and when you hover over them another box appears that goes away when you hover away from that box or main box but not when your mouse is in between them the empty space.
Once you click the new box the box remains there until:
user clicks anywhere else.
or an close text is clicked
http://jsfiddle.net/T5QHn/4/ Updated
var menu = $('.menu'), body = $('body');
menu.children('.box').hide();
body.click(hideIt);
menu.hover(showIt,hideIt);
menu.click(keepIt);
function showIt() {
$(this).children('.box').stop().fadeIn();
}
function keepIt() {
//something efficent and not illogical..
}
function hideIt() {
//i have a feeling this depends on keepIt and insn't just inverse of showIt
$(this).children('.box').stop().fadeOut();
}
use mouseenter and mouseleave on the parent, instead of hover.
Apply the click to hide all boxes to the body, then, on the containers put a click handler with event.stopPropagation
Updated fiddle: http://jsfiddle.net/moagrius/fsPd3/1/
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 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);
I have a group of divs that form a selection list inside of vert. scrolling div.
It is impossible to click on any of the items beyond those that are initially visible in the list.
When it works, the variable will be displayed in the input box & the selection will collapse.
Currently, it doesn't work, it just goes back the start of the list and nothing else happens.
Demo: http://www.partiproductions.com/searchertest2/index.html
I've tried a helper function, but it doesn't seem to be registering the click.
What do I need to change in my code to fix this?
$(function() {
$('#SearcherBar_stacks_in_1_page0 .ac_results div').click(function() {
var clterm = $(this).children("span").attr("class");
console.log('Clicked: ' + clterm);
$('input#select_searcher_stacks_in_1_page0.ac_input').val(clterm).trigger('keyup');
});
});
Thanks.
I am looking to build a tooltip that allows the user to click links within that tooltip to allow them to navigate to various sections of the site. My problem is that the tooltip disappears when I leave the a with my mouse? what I want is for the tool tip to disappear if I change to a new a or click close on the tooltip, my jquery is as below currently,
$(document).ready(function() {
/*
* Rollover jobwall logo and show job tooltip
*/
$('ul#jobs li a').mouseenter(function(){
var $this = $(this);
$this.addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
//alert($this);
$this.tooltip({ effect: 'slide'});
}
});
}).mouseleave(function(){
$(this).removeClass
$('#tooltip').remove();
});
});
How can I make it so that the tooltip appears on mouse enter of an a button only disappear when the user closes it through clicking a close button, or moving to a new a allowing the user to actually enter the tooltip without it disappearing.
I would look at hoverintent instead of mouseenter and mouseleave.
On the mouse leave event, you need to check to see if the mouse is located in the tooltip. If not, you can close it.
Moving $('#tooltip').remove(); to the top of the mouseenter function should do the trick. This will not remove the tooltip when the mouse leaves and will remove it if it exists when a new a is entered.
This assumes that 1) you already have a close function and 2) $('.active').append(html); creates #tooltip.
As commented by Chris though, this may be frustrating for users.
I have a text area and a "add" button on a form. By default the text area is shown as shrinked and grayed out. On focus it will be highlighted by changing the style. On blur it should go back to previous state. Along with highlighting the textarea, add note should toggle as visible and hidden. The problem is when i enter the data in text area and click on the add button, the blur event is hiding the add button and the event on the add button is never triggered.. any solution??
It seems like my question is not clear...
The solution is something like execute the blur event except that the next focused element is not the "add" button...
If there is text entered is it safe to assume you don't want to toggle the button because the user has the intention of entering a note? If so you could do something like:
$(textBox).blur(function() {
if($(this).val().length == 0) {
//change the style
//hide the button
}
})
You need to unhighlight your textarea and hide the "add" button only if there is nothing entered in the textarea:
$('textarea').blur(function() {
if($(this).val() != '') {
// unhighlight textarea
// hide "add" button
}
});
This way the user always sees the field and button if they actually entered something into it, regardless of whether it has focus or not.
Put a small delay between the focus leaving the textbox and the button being hidden, e.g.
function textBox_blur(evt)
{
window.setTimeout(
function() { button.style.display = 'none'; },
200 // length of delay in milliseconds
);
}
This will leave enough time for the click to process (though you might want to play with the length of the delay)