javascript - How To Scroll Inside Fancybox after Keydown Event -


i using fancybox 2.1.5 in asp.net mvc4 web application display list of string data in <ul>. in attempt make things easier user have enabled keypress events navigate , down resulting <li>. user can use mouse scroll & select or keyboard select items , continue on.

what have found if data shown greater amount , vertical scrollbars created (note: fancybox has maxheight property set), when using keyboard navigate down list, if selected item goes off fancybox window/dialog scrollbars not moving track if scroll mouse-wheel.

does know how can fancybox scroll manually when use keyboard?

i have tried messing overflow css settings , fancybox scroll properties isnt helping. im sure need trigger event when i'm navigating manually..

html

<div id='mydiv'>     <ul>         <li>apple</li>         <li>orange</li>         <li>pear</li>     </ul> </div>

fancybox js inc. keyboard setup

$.fancybox.open($("#mydiv"), {     minheight: 0,     maxheight: 300,     aftershow: function () {         $(document).on("keydown", function (e) {             setupkeyboardevents(e);         })     },     afterclose: function () {         $(document).off("keydown");     } });  function setupkeyboardevents(e) {     var $selected = $("#mydiv ul li.highlight"),         $li = $("#mydiv ul li");      if (e.keycode == 40) { /* down */         if (!$selected.length) {             $li.eq(0).addclass('highlight')         }         else {             $selected.removeclass('highlight');             if (!$selected.next().length) {                 $li.eq(0).addclass('highlight')             } else {                 $selected.next().addclass('highlight');             }         }     } else if (e.keycode === 38) { /* */         if (!$selected.length) {             $li.eq(-1).addclass('highlight')         }         else {             $selected.removeclass('highlight');             if (!$selected.prev().length) {                 $li.eq(-1).addclass('highlight')             } else {                 $selected.prev().addclass('highlight');             }         }     } else if (e.keycode == 13) { /* enter */         if ($selected.length) {             // continue..         }         return false;     } }

it seems fancybox scrollable container (the 1 overflow property set auto) needs gain focus before can use arrows scroll , down.

as workaround, use aftershow callback set focus on .fancybox-inner element :

$(".fancybox").fancybox({     aftershow: function(){         $(".fancybox-inner").attr("tabindex",1).focus();     } });

important : notice added tabindex attribute make workaround consistent browsers. chrome won't work without , firefox loose focus if clicking inside content (when having interactive content instance.)

check jsfiddle , see can use arrows scroll content , down right after fancybox shown.


-

Popular posts from this blog

Apache NiFi ExecuteScript: Groovy script to replace Json values via a mapping file -

i working apache nifi 0.5.1 on groovy script replace incoming json values ones contained in mapping file. mapping file looks (it simple .txt): header1;header2;header3 a;some text;a2 i have started following: import groovy.json.jsonbuilder import groovy.json.jsonslurper import java.nio.charset.standardcharsets def flowfile = session.get(); if (flowfile == null) { return; } flowfile = session.write(flowfile, { inputstream, outputstream -> def content = """ { "field1": "a" "field2": "a", "field3": "a" }""" def slurped = new jsonslurper().parsetext(content) def builder = new jsonbuilder(slurped) builder.content.field1 = "a" builder.content.field2 = "some text" builder.content.field3 = "a2" outputstream.write(builder.toprettystring().ge...
Read more

node.js - How do I prevent MongoDB replica set from querying the primary? -

read-operations-only: is there way have mongodb replica set, make mongodb instance on box connected to, mongodb gets queried? i have 3 ec2 instances behind aws load balancer. on each ec2 instance runs mongodb, part of replica set. i have express endpoints on nodejs , connect replica set follows mongodb.mongoclient.connect('mongodb://1.1.1.1,2.2.2.2,3.3.3.3.', function (err, db) { if (err) { complete('{}'); } else { i distribute load of queries evenly across 3 instances of mongodb replica set instead of default having queries routed ec2 instance primary mongodb defined, because destroys point of load balancer (which balance load of queries across 3 instances evenly). my understanding when connecting mongodb replica set, primary instance selected unless primary instance down, , therefore purpose of every secondary instance serve backup. in example people call hot,cold,cold. because there 2...
Read more