StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Have you tried anything yourself yet?</p> <p>Without a specific solution, here are a few things to get you going.</p> <p>1) Bind the keypress event (e.g. to the document)</p> <pre><code>$(document).keydown(MyKeyupFunc); </code></pre> <p>2) Capture the up/down keypress:</p> <pre><code>function MyKeyupFunc(event){ switch (event.keyCode) { case 38: //keyup //key down code break; case 40: //keydown //key up code break; default: return; } //stop event event.preventDefault(); event.stopPropagation(); if ($.browser.msie) { event.originalEvent.keyCode = 0; event.originalEvent.cancelBubble = true; event.originalEvent.returnValue = false; } } </code></pre> <p>3) The code for your keyup/keydown, will involve looking for what is selected, and what is the next/previous item. You may need to check that an item has the hover class on it as well.</p> <p>You will need some what of selecting your navigable items, therefore, you will need something for jQuery to be able to select. Suggest adding an empty css <code>class="navigable"</code> to each, and that way you can select all the items subject to keyboard navigation:</p> <pre><code>var $navListitems = $("li.navigable"); </code></pre> <p>Factoring your visible requirement:</p> <pre><code>var $navListitems = $("li.navigable:visible"); </code></pre> <p>4) Maybe think about sorting these check out the following link</p> <p><a href="http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/" rel="nofollow noreferrer">http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/</a></p> <p>This is a starter, anyway. I can think of lots more you'll need to do, but I think it will be an adventure for you to try yourself. </p> <p>When you have specific questions, I'm sure folk will be happy to help if you post back to the forum :-)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload