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>
Related
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>
Is it possible to add a button to Photoswipe? I know that I can make a on-click event to a button, but then i can't change the button-icon. Is it possible to just add a new button that print the picture with the normal java script funktion 'print' ?
Recent versions of Photoswipe (4.1.0, 4.1.1) seem to require you to actually customize it to add a new button. Just adding the button in the html and styling it appropriately worked on most browsers, but not Android, where Photoswipe does not let the event through to trigger your button.
Here's an example of adding a like button.
Add your button to where the other buttons are placed in your html:
<button class="pswp__button pswp__button--like" title="Like"></button>
Photoswipe uses the css background property to add icons to their buttons, so you can do something like this in your css file:
.pswp__button--like {
background: url(like.png) 0 0 no-repeat;
background-size: 44px 44px;
}
The file like.png would have your button icon in it. I did things differently since I was using a font-based icon, so rather than using the background property I added content to my <button>. If you do that you need to override the default background by adding something like this to your css:
.pswp__button--like {
background: inherit !important;
}
To get it to work on Android, you then need to edit photoswipe-ui-defaults.js and add an entry for your button in _uiElements like this:
{
name: 'button--like',
option: 'likeEl',
onTap: function() {
// handle your button click event here
}
}
Don't forget to update photoswipe-ui-defaults.min.js if you are using it.
Finally, where you initialize photoswipe in javascript, add the option
likeEl: true
If you skip this last step your button won't be activated.
I am doing something similar with a download button.
Add a new button:
<button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button>
In your CSS:
.pswp__button--download, .pswp__button--download:before {
background: url('/path/to/image') 12px 12px no-repeat;
background-size: 20px 20px;
width: 44px;
height: 44px;
}
The 12px 12px is the offset for the image to help center it. Adjust this and the background-size as needed.
Keep the hight and width as is to keep it the same size as the toolbar.
I have an element which is acting as a button with a little Javascript and CSS. I'll strip it down to the most bare example, so you can see the problem. The issue originates from the fact that the element is scaled down when it's clicked. Javascript interprets the clickable area of the button as its scaled down size, not the original size. This occurs in all modern desktop browsers.
Here are the important parts. HTML:
<div id="refresh">more</div>
CSS:
#refresh {
background-color: #FFF;
cursor: pointer;
transition: all 150ms ease-out;
}
#refresh:active {
transform: scale(0.8);
}
JS:
var refreshBtn = document.getElementById("refresh");
function newImg() {
// updates an image elsewhere
}
// an event listener based on
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
addEvent(refreshBtn, 'click', newImg);
So my image gets updated when I click on the area occupied by the scaled down button, defined by transform: scale(0.8). If I click outside of that area, in the outer 20% of my button, my JS does not update the image. The proper click transitions occur and the cursor displays correctly as a pointer, but the JS does not count this area as part of the onclick event.
This was covered here, but I find the solution unappealing:
Non-clickable area on transforming anchor
The same solution is offered here:
increasing clickable area of a button
Here's the CSS I used as outlined in those answers:
#refresh:before {
position: absolute;
content: '';
top: -12%;
right: -12%;
left: -12%;
bottom: -12%;
}
These ensure that Javascript now recognizes a bigger clickable area instead of the scaled-down area, but in turn the pointer and the CSS hover effects now react to hovering and clicking well outside the original button element. I consider it an ugly solution. Surely someone else has run into this problem before. Are there any nicer solutions?
Update: Here is a jsfiddle of the situation I've explained: http://jsfiddle.net/cx9ur44e/4/
To solve the issue of the size, you would need to add the click even to a wrapper of the button that will keep the size even if the button is active.
<div id="wrapper>
<div id="refresh">more</div>
</div>
I'm trying to mouseover an image which is behind an another image.
Is there any way to render the front image like it is not there, so I can mouseover the other image behind it?
Example can be seen here:
I can't mouseover the characters which are behind the logo boundingbox.
You can set the CSS property pointer-events: none on the obstructing object... but be aware that pointer events are all or nothing; mouseovers and hovers will pass right through, but so will clicks.
Here is a description of the value, from the Mozilla Developer's Network:
none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
I've put together a little example. In this example, I'm using onmouseover and onmouseout, since that's what you use on your website, but you could just as easily use the CSS :hover pseudo-selector. Here's a jsfiddle version of the example, and the stack snippet is below.
.hoverable {
width: 100px;
height: 100px;
background-color: blue;
}
.obscuring {
/* this first line is the important part */
pointer-events: none;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
<div class="hoverable" onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = 'blue'"> </div>
<div class="obscuring"> </div>
You can create some invisible divs on top of the whole thing and put the hover behaviour on them. Then control the characters position with the position of the invisible divs.
Hope it makes sense.
Take a look at this button: http://jsfiddle.net/vtortola/Dnxpe/
I Chrome, if you click on the top border, even when the ":hover" and ":active" css rules triggers, the event is not triggered. If you click more in the center, then it works fine.
In IE9, if you do the same it miss the 50% of the clicks.
The problem are the margins, when you click the margins switch, giving the effect of the button being pushed, but this makes the pointer be out of the button if you are clicking the top border but... the event should be already triggered.... why this happen?
Thanks.
This probably happens because a click() is considered complete only once both mousedown() and mouseup() are completed in succession. In the case of clicking near the top border mouseup() never gets triggered and the same holds true for click().
If you use mousedown() it'll work every time, but it'll happen before the entire click is completed.
$('button').mousedown(function(e){
$('#clicks').append('<span>click </span>');
});
To solve this you could do the following:
Add a container to the button and then add a mousedown handler to the button and a mouseup handler to the container. If you make sure they were both invoked, then you can be sure that a click event on the button has been performed.
Like so:
HTML
<div id="cont"><button>Click me</button></div>
<div id="clicks">
</div>
JavaScript
var mdown = false;
$('button').mousedown(function(e){
mdown = true;
});
$('#cont').mouseup(function(e){
if (mdown)
{
$('#clicks').append('<span>click </span>');
mdown = false;
}
});
I checked out you code and find an interesting bug.Its because of CSS.
Even you can regenerate that bug.
Steps:
1. Click on button near top border but do not release your finger from mouse.
2. Now, look at the button,your button is actually pushed down and that's why,it does not able to fire button click event.
Solution:
Remove margin when button is active.
button:active,input[type=submit]:active
{
box-shadow: 0px 0px 3px 3px #D8F6CE;
}
I hope it helps.
Here's the solution I came up with that uses a css psudo element to capture the click event. The benefit here is that you don't need javascript. The click events are always captured by the :after and bubble up to the button.
http://jsfiddle.net/kevinrockwood/fUuUB/1/
The main thing to note is the css:
button:after{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}