mouseout closes the trigger and not the target - javascript

I have set a popup to open at mouse over on an element. The popup should close when the cursor is off it.
For some reason the popup window closes when the cursor is right off its opener button, instead.
You can see an example here:
http://www.friends.wwz.co.il/Lab/Gefen/Generali/es/popup.html
Please try to hover with the mouse on the "lee mas" button. A popup will open. It should close at hovering off it. But instead it closes at hovering off the lee mas button, so it closes immediately.
Any idea where do I go wrong?
Many thanks in advance for you advice

The main problem is you are attaching hover events to the button. Once you hover out of the button element, it fires the hoverOut button.
So the ideal course of action can be:
Bind hover event to the button.
Once hovered, a pop-up is dynamically added.
Then, a hover event is bounded to the pop.
And the code of dissolving the pop-up is attached in the hover-out function.
So that when actually the cursor is hovered out of the pop-up it dissolves.
Apart from that, Just have a look at this fiddle. It has two hyperlinks for hover. The first is the one you are facing. The second one is the one you are looking for. :D
Code for it:
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
$("#theBox_2").slideUp(500);
});
});
body {
background-color: #eef;
}
#theBox_3,
#theBox_2 {
display: none;
border: 1px solid #000;
width: 200px;
height: 100px;
background-color: #ddf;
}
#toggleSwitch_j,
#StayOpen {
background-color: #cacaca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This layout will only keep the hidden div visible as long as you point to the link
<br>You'll never be able to reach anything inside the div
<br>jQuery Hover
<div id="theBox_3">Peek-a-boo!</div>
<hr>This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it. This would be handy if you need to put links or form elements inside the hidden div, instead of
just text to read.
<div id="StayOpen">
jQuery Hover
<div id="theBox_2">Peek-a-boo!</div>
</div>

Related

Add Mouse Event to all Child Elements in DIv

Here is what I am trying to do:
$(window).mousedown(function(e) {
switch (e.which) {
// left click
case 1:
e.preventDefault()
$(e.target).css("border", "2px solid red");
break;
// Middle click
case 2:
e.preventDefault()
$(e.target).css("border", "");
break;
}
});
The following code works great.
Whenever I click on any elements it would create a red box and when I click the middle button from the mouse
it removes the red box.
BUT:
what i want is I want the same functionality but want to apply to particular div elements only.
<div class="col-md-5" style="border: 1px solid black; margin: 1px; overflow-y: scroll; height: 450px;" >
<div id="webappcontents">
{{{this.html}}}
</div>
</div>
I want to add mouse click events on
div #webappcontents. Hhow can I achieve this?
This way all contents inside #webappcontents is clickable and creates red box.
Any help is great.
Your code: $(window).mousedown(function(e) { is catching any mouse click on the page
To specify the webappcontents div change that to
$('#webappcontents').mousedown(function(e) {
though you might want to only make certain elements that way, like all with the class='clickable' inside that container...
$('#webappcontents div.clickable').mousedown(function(e) {
// now you can access the element to modify with $(this)
// $(this).addClass('clicked')
Also, make sure this function registers after page load.. One way is using the jQuery document.ready
$(document).ready(function() {
$('#webappcontents').mousedown(function(e) {
// do stuff
})
});

Font-Awesome icon preventing click in parent button

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
Here's an example button:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap
Any ideas for why those left two pixels don't trigger a click event?
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.
Given this situation, we should definitly take a look at the CSS pointer-events Property
The pointer-events property defines whether or not an element reacts
to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:
button > i {
pointer-events: none;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup
over the same screen location. The sequence of these events is:
mousedown
mouseup
click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>

Trying to toggle a drawer open and closed with javascript

I'm trying to open and close a drawer using jQuery/JavaScript to change the drawer's height from 25px (where it is hidden behind another element) to 250px where it pops open and is visible. I have an up-arrow that acts as a button. It switches class to become a down-arrow as the drawer opens. Every thing in the up-arrow portion of the code works. For some reason the down-arrow part is not working and the drawer won't close. I have a sneaking suspicion that this is because I'm trying to add a click event to a class that has not yet been added to the DOM, but I'm not sure if that's right. Even if that is right I don't know how to fix it. Any ideas?
$('.arrow-up').click(function() {
$('.portfolio-details').css('height',250);
$('.portfolio-details h2 span').removeClass('arrow-up');
$('.portfolio-details h2 span').addClass('arrow-down');
});
$('.arrow-down').click(function() {
$('.portfolio-details').css('height',25);
$('.portfolio-details h2 span').addClass('arrow-up');
$('.portfolio-details h2 span').removeClass('arrow-down');
});
Try event delegation, since you are working with dynamic selector values
$(document).on('click', '.arrow-up', function() {
$('.portfolio-details').css('height',250);
$('.portfolio-details h2 span').removeClass('arrow-up');
$('.portfolio-details h2 span').addClass('arrow-down');
});
$(document).on('click', '.arrow-down', function() {
$('.portfolio-details').css('height',25);
$('.portfolio-details h2 span').addClass('arrow-up');
$('.portfolio-details h2 span').removeClass('arrow-down');
});

jQuery: hide div on hover, stay visible on click

I have a couple of position: absolute; "buttons" display:block; <a>'s and a couple of position: absolute; div's with text in them. The div's are hidden by display:none; set to the default.
When you *hover*hover over a button, the div next to it (in the code) should appear (with some kind of fade/scroll effect) and then fade/scroll out again if you move the cursor away from the button.
When you click on a button, the div next to it should stay visible (i.e. display:block;). It should only disappear again if you click on the button or the div itself (hovering over the button or the div shouldn't change anything).
I thought this would be straightforward, but I can't get it to work.
with a little knowledge of your html, here's how I got it.
html
button
<div class="mydiv">some text in it.</div>
jQuery
$('.mydiv').addClass('hover').click(function(){
$(this).addClass('hover').fadeOut();
});
$('a.mybutton').click(function() {
$('.mydiv').toggleClass('hover').show();
// $('.mydiv').removeClass('hover').show();
}).hover(function() {
$('.mydiv.hover').fadeIn();
}, function() {
$('.mydiv.hover').fadeOut();
});
Crazy demo

popup goes back to hidden state when clicking outside the popup area

If I have a popup (using a div), how can I have the div to go back to the hidden state when someone clicks anywhere outside of the div?
i.e. the popup is visible, then someone clicks outside the popup, the div should be hidden again.
How can I achieve this functionality?
A popular way to do this is with an overlay. When your create your div popup, also create a <div id="overlay"> immediately beneath it that takes up the whole screen:
div#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Optionally, you can use this overlay to darken all other content with, for example, background: #000 and opacity: 0.5.
After you've crafted your JavaScript to add this overlay right beneath your popup, add a click listener to it. When the user clicks the overlay, you'll know that s/he has clicked outside of your popup.
Note that position: fixed doesn't work in older browsers. One workaround is, when the overlay is visible, to instead set the overlay to position: absolute, then temporarily add overflow: hidden to <body> to prevent the user from scrolling down.
A different way of doing it that seems more straight forward to me, is this:
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#popup").remove();
$("body").unbind("click");
}
});
In short, the originalTarget is what was actually clicked, and the script then checks if #popup is one of its ancestors (called parents in jQuery). If it isn't, the click was outside, and we remove the popup.

Categories

Resources