CODEWITHSUNDEEP
javascriptjqueryhtmlcoordinates
Piotr Kula
Piotr Kula

Reputation: 9841

Gett css of screen coordintes

i am kind trying to hack add a feature to a plugin.

My scenario is that a div is overlaid on top of a table with many cells. This div spans across many cells of the table under it. But it is not embedded in the table- as mentioned; but actually position set absolute x,y coordinates on the screen.

If i click that floating div i can get the jsEvent mouse coordinates x,y..

How can i then use those coordinates to get more data like the css of all elements at that coordinate eg the cells class,id,etc directly below the click x,y ? or all the cells directly below or above.

I am trying to use jQuery. Any suggestions.

Upvotes: 0

Views: 114

Answers (2)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

Like this:

$("#div").click(function(event){
  var x = event.pageX, y = event.pageY;
  var $clickedTd = $("#table td").filter(function(){
    var tdx = $(this).offset().left, tdy = $(this).offset().top;
    var tdw = $(this).width(), tdh = $(this).height();
    return (x >= tdx && x <= tdx+w && y >= tdy && y <= tdy + tdh);
  });
  //Here you have a reference to the clicked cell in $clickedTd. use it as you want;
});

What we're doing is to find the td that is just in the place we clicked (getting the div click coordinates).

Cheers

Upvotes: 1

grc
grc

Reputation: 23575

This should work (where mousex and mousey are the coords):

$('td').each(function(index) {
    var offset = $(this).offset();
    if ((offset.left + $(this).outerWidth()) > mousex && offset.left < mousex && (offset.top + $(this).outerHeight()) > mousey && offset.top < mousey) {
       // $(this).css...
    }
  });

Upvotes: 2

Related Questions