not looking for any actual code just a point in the right direction with this one.
Is there anyway to increase the target area of a button but not increase it's size? for instance could i effectively add a 5-10px area around the button that will still count as clicking the button.
All of the methods i have seen increase the actual size of button which i do not want to do as this would push other elements out of place. My only other thinking is to have a listener for any clicks that can determine the closest clickable element and if it's within 5-10px have it fire.
You could add a pseudo-element (:after / :before), but be careful as two nearby links might overlap this way ..
<a href="your-link-here" class="big-link">some link text</a>
and
a.big-link{position:relative;}
a.big-link:before{
position:absolute;
content:'';
top:-10px;
right:-10px;
left:-10px;
bottom:-10px;
}
Demo at http://jsfiddle.net/kq8pq/2/
I wouldn't recommend trying to increase the clickable area of a button. If the button is too small, you should probably increase the size of the button as a whole. Touch devices are very good at helping users click even very small buttons.
However, if you have a use case for this where it makes sense then you could:
1) place the button inside a div with a padding of 5-10px, and then assign a click handler to the div that in turn triggers the click handler on the button it contains.
or a tidier solution - if you can change your current button style and click logic:
2) give the button a style with no background or border and 5-10px padding then create a div inside it styled like the original button.
Either way, a containing element with padding is what you'll want to work with.
It's possible, however, it's a little bit cumbersome, as you need to introduce two new elements, a wrapper and a empty div (fiddle):
HTML
<div class="button-wrapper">
<div class="click-catcher"></div> <!-- this will be styled with CSS -->
<button>I'm the button :)</button>
</div>
CSS
/* make it possible to position the catcher */
.button-wrapper{
position:relative;
}
/* place the button in the foreground */
.button-wrapper > button{
position:relative;
z-index:2;
}
/* give the catcher +1em on all sites*/
.click-catcher{
position:absolute;
top:-1em;
left:-1em;
right:-1em;
bottom:-1em;
}
JavaScript
/** instead of getting the element by class name, you should
* get it by ID, so you can do the right action for the right button
*/
document.getElementsByClassName("click-catcher")[0].onclick = function(){
alert("catched!"); /** you should do something better ;) */
};
Remark
It's not possible to increase the active area of elements such as button, input, video, audio etc. beyond their shown area/controls, that's why you need additional elements. Of course it's possible to check for every click whether it was in range of a button, however this is much more complicated.
Simply apply a border on the button that is the same color as your background. This will give the effect of enlarging the button's size, but still appearing as just the size you made it.
