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!
documentorwindow. - SachinGutte