CODEWITHSUNDEEP
javascriptcss
LubosB
LubosB

Reputation: 195

clickable area of a button that scales down on click

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/

Upvotes: 2

Views: 1502

Answers (1)

jordiburgos
jordiburgos

Reputation: 6302

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>

Upvotes: 1

Related Questions