Expander inside iframe kills fancyBox keyboard navigation (prev/next via Arrow keys)

[ZaneCEO]

Hi, I've a peculiar issue with jquery-expander.

First of all: here is my demo of the issue.

The problem is this: I've a page with multiple link. Each link opens a fancyBox iframe URL with some content in it. Some of the opened links have jquery-expanded text.

Example of the "main" page:

<a rel="gallery" class="fancybox fancybox.iframe" href="content1.html">link1</a>
<a rel="gallery" class="fancybox fancybox.iframe" href="content2.html">link2</a>
<a rel="gallery" class="fancybox fancybox.iframe" href="content4.html">link3</a>

    <script>
            var fancyboxOptions = {
                        autoSize    : false,
                        fitToView   : true,
                        width       : '50%',
                        height      : '50%',
            };

            $(".fancybox").fancybox(fancyboxOptions);
    </script>

Example of the iframe-opened page:

<p class="expandable">
    Example text Example text Example text Example text Example text Example text
</p>

<script>
$('.expandable').expander({
    slicePoint:       10,
    expandPrefix:     '... ',
    expandText:       '[read more]',
    collapseTimer:    0,
    userCollapseText: '',

    //https://github.com/kswedberg/jquery-expander/issues/46
    expandEffect: 'fadeIn',
    collapseEffect: 'fadeOut'
  });
</script>

If you just open the links everything works fine: the text is "compressed" by jquery-expander exactly as expected and you can use the keyboard's Arrow keys left and right to go to the next and previous link (this functionality is provided by fancyBox by default).

The issue arises when you click the jquery-expander "activation" link: the text expansion kicks in as expected, but it disrupt the ability to use the keyboard to go next/prev.

Switching to fancybox.ajax effectively solves the problem, but the whole page is pretty complex and many part are already coded with the iframe-based approch in mind, so switching fancyBox method is not an option.

I was wondering if you could have a look at it and maybe easily fix the issue on your side.

Thank you very much for your time.

[kswedberg]

Hi @ZaneCEO , I looked at the demo you provided (thanks for that), and I discovered that if I click anywhere within the iframe except for the navigation links, the keyboard navigation stops working. Then, as soon as I click a navigation link again, the keyboard navigation is "re-activated." So, this doesn't appear to be an issue with the expander plugin at all, but rather the fancybox plugin.

Try clicking some text in the center of the iframe, but avoid the "read more" link and the navigation links. Keyboard nav should stop working, as it does for me.

[ZaneCEO]

hi @kswedberg ! thank you so much for taking the time to look at the issue! I repeated the test without even loading jquery-expander and the buggy behaviour continues, so this has nothing to do with your plugin (which I love and I always recommend to fellows devs when the need arises).

I'm ashamed to have bothered you for nothing :-( thanks again for pointing me in the right direction though!

[kswedberg]

@ZaneCEO No need to be ashamed. 😄 It was a reasonable assumption. And I'm always happy to help (though, regrettably, it often takes me too long to do so).