Does anybody know how can I detect if mouse is over a column border or a cell border, either by jQuery or JavaScript?

I want to implement a column resizing on a specific table.

Any help is appreciated.

Does anybody know how can I detect if mouse is over a column border or a cell border, either by jQuery or JavaScript?

I want to implement a column resizing on a specific table.

Any help is appreciated.

• javascript
• jquery
• html
• css

• 1 Borders aren't elements, they are part of the element they border, so you can't really attach an event handler to the border only, as far as I know ? – adeneo Commented Mar 14, 2014 at 16:32
• @adeneo yeah but it would interesting if you could smirk – Andrei Cristian Prodan Commented Mar 14, 2014 at 16:33
• Then what's the solution? I mean is there any other option? – Javad Commented Mar 14, 2014 at 16:33
• 2 You can't. What you CAN do is make new elements for the borders, for example like what jQueryUI does for resizable elements, like jqueryui./dialog – blgt Commented Mar 14, 2014 at 16:34
• 1 ^^ you could use jQuery UI resizable: jsfiddle/3zEFe – A. Wolff Commented Mar 14, 2014 at 16:34

4 Answers 4

You should check if the offsetX and offsetY are less than the border-width and if so you're in the border, also check if offsetX is greater than innerWidth or offsetY is greater than innerHeight

$('td').hover(function(e){
    var border_width = parseInt($(this).css('border-width'));
    if(e.offsetX < border_width || e.offsetX > $(this).innerWidth() || e.offsetY < border_width || e.offsetY > $(this).innerHeight()){
        console.log('This is the border');  
    }
});

Here's a jsFiddle

May be you can do like as follows:

1. Listen for mouse hover event on the element
2. Check the mouse position.
3. If the offset() + outerWidth() of the element is same as the mouse position, it means, you are on the border.

You can detect if the mouse is over JUST the border of that element if you generate a clone element in fixed position of that exact element you are hovering but WITHOUT any padding or border, then you check on mousemove if you are over the clone AND if you are over the original elem. If you are just over the original elem, then you are obviously only hovering the border. BOOYAH!

I had to tweak Ohgodwhy's answer to get the bottom and right borders to work, but this works to get see if you clicked the border on any side.

$(elmnt).click(function(e){
    var border_width = 10;
    if(e.offsetX < 0 || e.offsetX > ($(elmnt).innerWidth() - (border_width * 2)) || e.offsetY < 0 || e.offsetY > ($(elmnt).innerHeight() - (border_width * 2))){
        alert("you clicked the border");
    }
});