Overlay does not work as expected

[nalexiou]

Hi Hector,
I attempted to use Focusable on http://www.coupons.com. When I focus on an element while at the top of the page, focusable works fine. However, if I scroll down and then attempt to focus on an element on that section of the page, the overlay does not cover that part of page. I am suspecting it has something to do with the heights of of the columns? If you can take a look, that would be great!

Thank you.
Nick

[zzarcon]

Hi @nalexiou thanks for your time, the thing is that when Focusable it's enabled, we make the overflow of the body to hidden, by this way the user can't perform a scroll in the web (at least this is the approach of the lib).

The columns grows vertically and their height it's equal to the window height. So if you can perform a scroll in your site, probably was a bug of the lib.

Can you please put here the steps to reproduce the bug? show me what element are you trying to set focus here http://www.coupons.com and I'll try to reproduce and fixe it.

Thanks!

[nalexiou]

Hi Hector,

Thank you for looking at this issue so quickly. So, this is what I do to get the get to the issue:

1. Visit www.coupons.com
2. Inject your jquery abnd infocus-element-overlay.min.js into the site.
3. Scroll down a little bit on the page.
4. Focus on the first coupon item (Chex Mix offer of the week) using Focusable.setFocus($('[data-podid="18473147"]'));

As you can see from the screenshot, the overlay does not extend all the way do - it gets cut off. I have no issue the overflow:hidden part, that is, I do not need the page to be scrollable while the item is focused.

Here is also a snapshot of html code for the overlay while focusing on the item:

Does this help?

Thank you.
@nalexiou

[zzarcon]

Ey man thanks you so much for the detailed issue and images, I'll work to fix it as soon as posible. I'll ping you with the fix! Thanks

[zzarcon]

I just tested a bit the issue in your page and noticed that is related with the offset of the current element... It's because is calculated relative to the entire document instead of the visible part (window) so later I'll try to fix it ;)

[nalexiou]

You're welcome Hector. Glad to know this helped. Looking forward to the fix.

Nick

On Dec 23, 2014, at 4:38 AM, Hector Leon Zarco Garcia notifications@github.com wrote:

I just tested a bit the issue in your page and noticed that is related with the offset of the current element... It's because is calculated relative to the entire document instead of the visible part (window) so later I'll try to fix it ;)

—
Reply to this email directly or view it on GitHub.

[jejung]

Hi all, I had the same issue. I created a solution, testing it at the moment. Check this commit jejung@f9bfba0. Untill now it's required to wait the scroll animation ends and then focus the element.

[jejung]

Added pull request #25