I'm using Bootstrap tooltips on my web app and they were being cut off by it's parent div.
To solve this I added data-container="body"
Hello
This solved the problem but a new problem came with it.
When I click on the anchor and navigate the tooltip won't disappear.
Has anyone come across this? Is there a simple way to solve this?
EDIT - JSFiddle similar to my problem http://jsfiddle.net/m9AX5/5/ except in my case the parent div doesnt get removed.
It happens because the mouseleave isn't detected.
One solution is to hide tooltip on click action:
$('#button').on('click', function () {
$(this).tooltip('hide')
})
Example:
http://jsfiddle.net/m9AX5/6/
Hope it helps.
As Andre mentioned, the mouseleave event isn't fired, so the tooltip doesn't get removed.
To do the same thing as hiding the tooltip, you can simply trigger the mouseleave event manually (Updated JSFiddle).
$(this).trigger('mouseleave');
While you haven't explained what happens when you click the element in your case, I would guess it's because the element was removed and the mouseleave event is never triggered. In this case, you should write an event listener and trigger the mouseleave element manually:
$('#anchor').click(function(){
$(this).trigger('mouseleave');
}
Related
I've read quite a few things on stack related to this issue, but I can't seem to solve my problem.
Essentially, I'm using jQueryModal (http://jquerymodal.com/).
What I want to have happen is, when the modal is launched, aka:
$(".buttonSpacing").click(function() {
$("#page").modal();
}
the modal opens up as expected. Contained in a div in that modal is a contenteditable div. Basically, I want to prevent default on everything except the contenteditable div. When the modal closes, I want events to then be unbound.
Something like this:
$(".buttonSpacing").click(function() {
$("#page").modal();
$(':not(#myContentEditableDiv)').bind('mousedown',function(e)
{
e.stopPropagation(); // Tried with and without this line
e.preventDefault();
});
}
doesn't seem to work. #myContentEditableDiv loses the default functionality as well as everything else.
If a previous question has answered this, I guess I wasn't able to apply it correctly to my situation.
The reason for this is I want the cursor to always remain in the editable area, wherever it is they left it, even when I'm having them select things to dynamically add to the editable area, or if they accidentally click outside of it.
Given my situation, how can I make this happen?
Thanks for your help.
EDIT:
Here's a js fiddle showing the problem:
https://jsfiddle.net/7Lwudpr4/2/
The problem is that the mouse down event is propagating from the text area to the parent elements, which are then preventing the default action. To fix this issue, add the following:
$('#textArea').bind('mousedown', function(e) {
e.stopPropagation();
})
Updated JSFiddle: https://jsfiddle.net/gp43028d/1/
Note that you'll probably need to handle the mouseup events on your other elements, as they won't fire click events since preventDefault() is called on the mousedown event.
I'm trying to build some kind of element inspector (like in Chrome/FF).
Flow is as follows:
You click 'Start inspecting' button.
You hover over necessary element.
You click on that element.
You should see that element in console.
JSFiddle example
Here is the code:
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
$(this).on('click.INSPECTOR', function(e){
$('section *').off('mouseover.INSPECTOR');
$('section *').off('click.INSPECTOR');
$('.hovered-element').removeClass("hovered-element");
console.log(e.target);
});
});
};
The problem is: each time I hover over some element - click event handler is attached to it. So if I hover over p element 5 times, and then click on it - I will see 5 console.logs instead of 1.
I tried to implement it using mouseenter/mouseleave, but faced the issue, that each element can be hovered only once - another JSFiddle example
So how can I improve my code that no matter how many times I hover over the element, it will have only one click handler?
Thanks in advance, any help will be appreciated!
Did you try moving the onclick handler outside the mouseover?
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
}).on('click.INSPECTOR', function (e) {
$('section *').off('mouseover.INSPECTOR click.INSPECTOR');
console.log(e.target);
});
};
DEMO
I'd suggest breaking it up into parts. The user clicks on "Start Inspecting" and your page goes into inspecting mode where it adds css dynamically to every element that is hovered over so it looks similar to Chrome. When you click on an element in inspecting mode then you can handle it how you want. This way you only have to add one hover and one click handler per element, thus only triggering the event once.
I have 2 DIVs and in each DIV there's a Button which does something on click.
Now I've added a piece of code to bring the DIVs to front when they get a mousedown. Which works very well. The problem is, that they swallow the mousedown of the inner button... The inner button can only be clicked by double clicking it.
http://jsfiddle.net/nUtz6/
$('div').mousedown(function (event) {
$(this).parent().append($(this));
});
how could I solve this problem? I did it this way because I don't want to increment the z-index of the CSS property to some magic number everytime I click the div. I read that jquery also does the DOM manipulation trick.
The problem seems to occur because I change the DOM right before the click-Event of the button. If I don't do anything in the mousedown, everything works fine.
Just check that the DIV is actually the target of the event :
$('div').mousedown(function (event) {
if (event.target.tagName.toLowerCase() != 'button')
$(this).parent().append($(this));
});
FIDDLE
I have a slideshow that has 5 slides (each has an individual id) and a previous and next button. When hovering the previous or next button you get a tooltip, the tooltip uses jQuery to get the ID attribute from the previous and next div and show this.
Ive gotten it working fine on mouseenter only if you dont leave the div and keep clicking the Tooltip doesnt update, you have to leave the arrows after each click for the value to be aupdated, does this make sense?
my script is...
$("div.arrows div").bind("mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});
Since you are not leaving the div the next mouseenter is not fired which will update the tooltip. Try to set the tooltip on slide change event if supported by the plugin you are using or click event of the prev/next buttons.
You will have to bind the updated html to the click event also then. This may work. Hard to tell without your html.
$("div.arrows div").bind("click, mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});
What does mouseover do and do you want it to change after a click on the next/prev button? I think you have to remove the inner HTML before appending new HTML. Maybe try to empty the element with .empty() and add a click event to catch that and call the function from there as well. Also try to log or alert some feedback to know when it does fire.
The question is probably worded in a very confusing way so here's a quick example
http://www.andytimney.com/projects/jquerydropdown/
if you click an "Archive", a dropdown will appear. Now if you want to close it, you need to click "Archive" again. However I want to close it by any click that doesn't target "Option 1", "Option 2". Similar to how Facebook does it if you click the "Account" menu in the top right corner.
The only solution that comes to my mind is to tie an onClick function to either or if that won't work to all elements present on the page except several elements that I'll specify. This solution looks a little hackish to me so I wonder if there is a smarter solution that I am missing.
Read this How do I detect a click outside an element?
Attach an click event to the body and test if the clicked item was not an option:
$('body').click( function(e) {
if(!$(e.target).parents('.option').length && !$(e.target).hasClass('.option')) {
$('.archive').hide();
}
});
have you tried document click and stop propagation for the event when menu click is triggered? interesting article on event bubbling http://www.quirksmode.org/js/events_order.html