2

The Situation

I am building a basic slide deck in HTML, CSS & Javascript. Its based on the jquery cycle plugin. The slides are simple li items that contain either images, text or iframes (e.g. youtube, or just another webpage i.e NOT pages that live on my domain/have control over). I have the next and previous buttons working with Jquery Keydown which is working well, currently the user does not have to use the mouse to move through the slides

The problem

When I have keyed through to an li that contains an iframe, if the user clicks into the iframe the focus is shifted to the iframe (as you'd expect) and in order to move the next slide you have to refocus onto the next or previous buttons with a mouse click. Is there anyway to keep the page listening for the keydown events in the parent regardless of where the focus within the page is?

Also if possible

It would be great if there was a solution that also involved automatically bringing the iframe into focus (as well as maintaining next/prev as I mentioned) when that slide is active so that for example you could just use space bar to play/pause a youtube video and then simply click left to move to the next slide. I basically want to not have to use a mouse if not necessary.

Key press code below (You'd need cycle plugin & some of my code to get the deck working - I can provide if necessary but I feel like there could be a generic solution here for consistently listening for keydown events that could be used in other contexts)

Jquery for keypress

    $(document).ready(function () { 
        $("body").keydown(function(e) {
            if(e.keyCode == 37) { // left
                $("#prev").click();
                return false;
                }
            else if(e.keyCode == 39) { // right
                $("#next").click();
                }

        });
    });

HTML

<body>


<ul class="images">

    <!-- Basic slide example -->

    <li class="wrapper" title="test slide 01"></li>


    <!-- Example with iframe -->

    <li class="wrapper" title="test slide 02" >
    <iframe width="100%" height="100%" id="iframe" 
    src="http://www.youtube.com/embed/BlpwHBn6ikg?wmode=transparent" frameborder="0" allowfullscreen>   
    </iframe>
    </li>



</ul>

    <div id="prev">
    </div>
    <div id="next">
    </div>

Cycle plugin i'm using

http://malsup.github.io/jquery.cycle.all.js

My options

$(function() {var index=0,hash=window.location.hash;if(hash){index=/\d+/.exec(hash)[0];index=(parseInt(index)||1)-1;}  
    $('.images')
    .before('<div id="nav">') 
    .cycle({
        prev:   '#prev',
        next:   '#next',
        timeout: 0,
        slideResize: 0,
        containerResize: 0,
        startingSlide:index,
        pager:  '#nav',
        before: onBefore,
        pagerAnchorBuilder: function(i, slide) {
        return '<a href="#"><p>' + $(slide).attr('title') + ' </p></a>';},
        after:function(curr,next,opts){window.location.hash=opts.currSlide+1;}
        });

        function onBefore() { 
            $('#caption') 
            .html(this.h1); 
        };

}); 

function setSlide(index) {
            $('.images').cycle(index);
        }

CSS for prev & next

#prev, #next{
width: 40px;
height: 100%;
position: absolute;
bottom: 90px;
cursor: pointer;
z-index: 1100;

I hope that's clear, any help would be much appreciated. Any solution does not have to supported in every browser, minimum requirement would be that it works in chrome.

Thank you!

Nick
  • 914
  • 1
  • 10
  • 30
  • rather than listening to keydown events on body, you can also use `document` or `window`. – SachinGutte May 08 '13 at 13:27
  • Hi SachinG, I have tried simply replacing ("body") with ("window") and ("document") and the keydown event no longer works. I am referencing window and document incorrectly? – Nick May 08 '13 at 13:35
  • remove quotes while using window and document. But i figured out that also don't work. Sry! – SachinGutte May 08 '13 at 13:36
  • can you post the code of the next and prev button. The problem is that you are setting the iframe in focus, u need to test if the next/prev is a iframe and put the focus in the correct dom element – joao May 08 '13 at 14:09
  • Hi Joao, I've added all relevant code. I think by code for next and prev you mean the js? You would have to look through the Cycle code for this.. – Nick May 08 '13 at 14:22
  • Not getting any good idea how to fix this. You need to force focus on li when you click frame, correct? you can always get a click event on iframe elements that trigger focus on closest li... Try something like this, just to see if works, on document.ready: $('.images iframe').click(function(){ $(this).closest('li').trigger('focus'); }) – joao May 08 '13 at 14:39
  • Thanks Joao but unfortunately that didn't work – Nick May 08 '13 at 15:01
  • let me check how cicle checks focus, meanwhile try to change: $(this).closest('li').trigger('focus'); to $(this).closest('li').click(); – joao May 08 '13 at 15:06
  • 1
    There's nothing to fix, this is the expected behavior.Once a user focuses an iframe, they are in the iframe and js in the main page that's based on user input won't run until the main page in focused again and the action is triggered. In order to do what you're trying to do you would need js on both sites talking to each other so the iframe can tell the current page that an event has occurred. – FiLeVeR10 Feb 20 '15 at 00:34

0 Answers0