how to set the blue border in the middle like the jquery site.

Question

in this page:http://api.jquery.com/category/effects/

when you put 'up' or 'down',

the blue border is always in the moddle of the screen,

how to do this .

i have the hotkeys lib:http://www.openjs.com/scripts/events/keyboard_shortcuts/

thanks

Answer 1

1. Catch the keyup event and check the keycode.

2. If keycode is 40 then add a class(with border style set) to the first li element.

3. On next keyup remove the class from the previous li element and add to the next or previous li according to the value of the keycode. If keycode is 40(down arrow) then add class to the next li element. If keycode is 38(up arrow) then add class to previous li element.

Something like

var currentFocusedElem = null;
        $(function(){
            $(document).keyup(function(e){
                if ( currentFocusedElem == null )
                {
                    currentFocusedElem = $("#ul1 li:first-child");
                }
                else
                {
                    currentFocusedElem.removeClass("blueborder");

                    if ( e.keyCode === 40 )
                    {
                        currentFocusedElem = currentFocusedElem.next("li");
                    }
                    else if ( e.keyCode === 38 )
                    {
                        currentFocusedElem = currentFocusedElem.prev("li");
                    }
                }

                currentFocusedElem.addClass ( "blueborder" );
            });
        });

Additionally you will have to check for first element and last element and do the action accordingly.