iframe - Keep listening for jquery keydown events regardless of focus -

-

the situation

i building basic slide deck in html, css & javascript. based on jquery cycle plugin. slides simple li items contain either images, text or iframes (e.g. youtube, or webpage i.e not pages live on domain/have control over). have next , previous buttons working jquery keydown working well, user not have use mouse move through slides

the problem

when have keyed through li contains iframe, if user clicks iframe focus shifted iframe (as you'd expect) , in order move next slide have refocus onto next or previous buttons mouse click. there anyway keep page listening keydown events in parent regardless of focus within page is?

also if possible

it great if there solution involved automatically bringing iframe focus (as maintaining next/prev mentioned) when slide active example use space bar play/pause youtube video , click left move next slide. want not have use mouse if not necessary.

key press code below (you'd need cycle plugin & of code deck working - can provide if necessary feel there generic solution here consistently listening keydown events used in other contexts)

jquery 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 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 prev & next

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

i hope that's clear, appreciated. solution not have supported in every browser, minimum requirement works in chrome.

thank you!


Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused&qu
Read more

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

-
i have simple page in intranet uses razor/asp fetch single record table , display it, plus few graphic, dashboard display. meaning, no user intervention other first time open ie internal url. the problem having every morning ie displays "page not found or network error" message. refresh page, , it's stuck , doesn't display anything. try different pc, open ie internal url , it's stuck... ...until following: login server hosting page run inetmgr go web sites, etc right click on page that's giving me problem , select browse at moment, error message: server error in '/' application. -------------------------------------------------------------------------------- type of page not served. description: type of page have requested not served because has been explicitly forbidden. extension '.cshtml' may incorrect. please review url below , make sure spelled correctly. requested url: /application/dashboard.cshtml ---------------
Read more

c++ - wxwidget compiling on windows command prompt -

-
can please guide me on method,as how compile wxwidget using windows command prompt or msys. [i can't seem find on wxwiki/wxwidget official book/anywhere else] i have compiled wxwidget instructions have provided (using msys). from searching on internet seems 1 can (maybe?) through use of makefile (is correct?) if yes: directory & how should link wx libraries in makefile if no: way besides makefile? i know can use ide's code::block , make life simpler prefer compile using command prompt/msys. thanks in advance.
Read more