Fuzzy results

[oisinlavery]

HI Gilmoreorless,

Thanks so much for this plugin, it's really useful and after alot of searching also quite unique.

I am currently using it on my fluid / responsive grid framework to test which elements are at the side and style them differently. Applying the classes dynamically is essential for a responsive grid. I am also using it on isotope items in a similar manner.

So, the only problem I'm having is with percentage widths as the browser rounds the widths and can be off by a pixel. This only really happens on fractional percentage widths so for example with the following html structure:

div style="width:50%; float:left"
div style="width:50%; float:left"
div style="width:33%; float:left"
div style="width:33%; float:left"
div style="width:33%; float:left"

When I'm testing for the nearest div to the right hand side (x:99999, h:99999) then the 2nd div will always be included but the 5th div will only be included sometimes(depending on the window size).

I think a good solution would be to include some sort of rounding option which would allow for more fuzzy results than the very exact results the plugin gives at the moment. It would certainly help me out!

If you don't have the time to add such functionality then perhaps you could steer me in the right direction?

Thanks again for creating this and best regards,
Oisin

[gilmoreorless]

Hi Oisin,

That's a great idea, I'll work on it soon.
I think the best way to do it would be to pass in a "tolerance" pixel parameter with the x/y properties - what that work for you?

Cheers,
Gil

[oisinlavery]

Great!

Tolerance is a good way to phrase it, with all the little inconsistencies between browsers it is very important. Here is a link to the percentage bug I mentioned: http://css-tricks.com/percentage-bugs-in-webkit/

If i had a suggestion for another feature it would be to have a quick way for testing nearest to the left / right / top / bottom. At the moment I just use something like this:

$(".grid").nearest({
    x: 0,
    h: 99999,
    checkVert: false
}).addClass("touching-left");

This works well but I'm sure it would be easy to add an automatic way. Anyway just a suggestion.

Best regards,
Oisin

[gilmoreorless]

Hi Oisin,

I've pushed up version 1.1 which includes the tolerance parameter in the options, and I've updated the documentation and demo page for it.

Also, your suggestion about testing for the edges of the page is a good one, so I've created another issue for it (#2).

Cheers,
Gil

[oisinlavery]

Hey that's great and thanks for adding the other issue, it would make my code a lot cleaner too.

[oisinlavery]

I just checked out your demo and it looks great... the circles are so cool and really help explain what's happening. Genius!