0

When I click with my it should works like the image below.

enter image description here

But instead, my code is doing this.

enter image description here

I made an example (see the fiddle below). As you can see in the image, my current problem is:

All the above and below (not only the first row) are changing too.

In my fiddle example, I'm using .css('background-color', 'red') to test it.

Here is my fiddle.

I gathered information in those two posts.

Community
  • 1
  • 1
Michel Ayres
  • 5,891
  • 10
  • 63
  • 97
  • 1
    What is your question? Where are you stuck? – Michael Petrotta Apr 27 '12 at 02:40
  • 1
    Left + right click simultaneously is not the best design idea. For example, Mac laptop users would have a very hard time with that, and I'm sure there are many others who would share the difficulty. – rid Apr 27 '12 at 02:41
  • Thanks for the reply, sorry if I could express as I wish. As I tried to say @MichaelPetrotta I Need only the near divs around the click. but at the moment I'm getting all divs that are above my click (not only the first row) and all divs below (not only the first row) – Michel Ayres Apr 27 '12 at 02:42
  • @Radu Sorry, As I said, the left+right is from Minesweeper not from my example. In my example is only a normal click. – Michel Ayres Apr 27 '12 at 02:42
  • @MichaelPetrotta , +Radu, I made some changes in the question to make things clear. I hope this will clarify my question. – Michel Ayres Apr 27 '12 at 02:47

1 Answers1

1

Dont know what you rally want but try this:

$.expr[':'].xy = function (obj, index, meta, stack) {
    var xy = meta[3].split(',');
    var x = xy[0];
    var y = xy[1];
    var el = $(obj);
    var el_offset = el.offset();
    return el_offset.left == y && (el_offset.top-el.height() == x || el_offset.top+el.height() == x);
}

working example

UPDATE:

hmm you can select all of them like this:

$.expr[':'].xy = function (obj, index, meta, stack) {
    var xy = meta[3].split(',');
    var y = xy[0];
    var x = xy[1];
    var el = $(obj);
    var el_offset = el.offset();
    // check for top and bottom 3 blocks
    if ((el_offset.top-el.height() == y || el_offset.top+el.height() == y) &&  (el_offset.left+el.width() == x || el_offset.left == x || el_offset.left-el.width() == x))
        return true;
    // left and right
    else if (el_offset.top == y && (el_offset.left+el.width() == x || el_offset.left-el.width() == x))
        return true;

    return false;
}

and then do like this:

$(document).ready(function myfunction() {

    $('.content').on("click", function () {
        var obj_left = $(this).offset().left;
        var obj_top = $(this).offset().top;

        $('#wrap').find('.content:xy(' + obj_top + ',' + obj_left + ')').css('background-color', 'red');
    });

});
Vytautas
  • 3,509
  • 1
  • 27
  • 43
  • Thanks for the reply. I checked in your example, and it's what I was looking for. – Michel Ayres Apr 27 '12 at 13:16
  • Really thank you for the complement, I have removed that extra question of the comment because it was not part of the original question, and I was being a little abusive about it. But really thanks for the complement =) – Michel Ayres Apr 27 '12 at 13:42