7

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.

Javad
  • 4,339
  • 3
  • 21
  • 36
  • 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 Mar 14 '14 at 16:32
  • @adeneo yeah but it would interesting if you could *smirk* – Andrei Cristian Prodan Mar 14 '14 at 16:33
  • Then what's the solution? I mean is there any other option? – Javad Mar 14 '14 at 16:33
  • Also. whenever the pointer enters into the element it definitely crossed the border/boundary. – The Alpha Mar 14 '14 at 16:34
  • 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 https://jqueryui.com/dialog/ – blgt Mar 14 '14 at 16:34
  • 1
    ^^ you could use jQuery UI resizable: http://jsfiddle.net/3zEFe/ – A. Wolff Mar 14 '14 at 16:34
  • it's possible! and as soon as I'll post the answer, Ima get my think-out-of-the-box award! (yes, wordplay) – Andrei Cristian Prodan Mar 14 '14 at 16:35
  • @AndreiCristianProdan and I will vote up for your answer if it works – Javad Mar 14 '14 at 16:37
  • Just a guess, can you use a mouseover on the main element and then check the mouse coordinates to see if they are within borderWidth of the edge? Not sure if the border is part of the element for mouseover. Make the borderWidth very large (ie,20px) to test? – Miro Mar 14 '14 at 16:43
  • That's similart to @jintoppy answer but I am not sure about the offset() – Javad Mar 14 '14 at 16:45
  • Just in case for all, the answer from @Ohgodwhy fixed my issue, but to make my columns resiable I decided to use jQuery UI `resiable({handle : "e"})` which fix my other issues – Javad Mar 14 '14 at 18:52

4 Answers4

12

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

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
1

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.
Jinto
  • 847
  • 1
  • 11
  • 27
  • offset of mouse? what if border(outerWidth) is 10px wide? What if it's innerWidth? even if your solution were possible, you'd still have to add both – Andrei Cristian Prodan Mar 14 '14 at 16:43
  • offset of the element will give the position of element. if you compare that with mouse coordinates, you should get the position. Even if the border size is 10px, it will work if do the maths right. The requirement is to know if it is on the border. – Jinto Mar 14 '14 at 16:45
0

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!

Andrei Cristian Prodan
  • 1,114
  • 4
  • 17
  • 34
  • 1
    if you have basic js knowledge and decent jquery, this shouldn't be more than... challenging and take several hours, and will probably give you performance issues if you combine it with the code of a bigger application – Andrei Cristian Prodan Mar 14 '14 at 16:46
0

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");
    }
});
StarSweeper
  • 397
  • 2
  • 4
  • 28