CODEWITHSUNDEEP
jqueryhtmlcss
Benjamin
Benjamin

Reputation: 2670

How to get focused to a selected li using navigation keys in jquery

<div class='share-hold'>
   <i class="fa fa-share-alt"></i>
   <div class="share">
      <div class='input-hold'>
         <input type="email" placeholder="Email" />
      </div>
      <div class="share-drop">
         <ul class="dropdown-notif">
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
         </ul>
      </div>
   </div>
</div>

.share-drop .dropdown-notif{
    display: none;
    background-color: #fff;
    position: absolute;
    top: 49px;
    z-index: 1;
    height: 200px !important;
    overflow-y: auto;
}
.share-drop .dropdown-notif li{
    padding: 8px 0px 8px 5px  !important;
    position: relative;
    list-style-type: none;
}
.share-drop .dropdown-notif li a{
    padding: 0 !important;
}
.frsh-wrapper article:last-child .user-grp li:last-child .share-drop .dropdown-notif{
    top: -204px;
}
.share-drop .dropdown-notif li.selected{
    background-color: #ddd;
}

$('.share-drop .dropdown-notif li').click(function() {
    var value = $(this).find('a').text();
    $(this).parents('.share').find('input').val(value);
    $('.share-drop .dropdown-notif').hide();
});
$(".share .input-hold input").keyup(function() {
    $(this).parents('.share').find('.share-drop .dropdown-notif').show();
    if ($(this).val() == '') {
        $('.share-drop .dropdown-notif').hide();
    }
});
$(function() {
    var li = $('.share-drop .dropdown-notif li');
    var liSelected;
    $(window).keydown(function(e) {
        if (e.which === 40) {
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.next();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.eq(0).addClass('selected');
                }
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else if (e.which === 38) {
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.last().addClass('selected');
                }
            } else {
                liSelected = li.last().addClass('selected');
            }
        }
    });
});

I need to focus and scroll to the list elements when it is added with the class selected. I tried the above code to achieve it. Can some one spot me whats wrong with my code and help me to find some solution for it. Thanks in advance. Below is the fiddle link

http://jsfiddle.net/MCxbS/1

Upvotes: 2

Views: 702

Answers (2)

user3580982
user3580982

Reputation:

All u need to add the following line to your code. 

$('.share-drop .dropdown-notif').scrollTop($('.selected').position().top);

Check out the below fiddle Demo

Upvotes: 1

prakashstar42
prakashstar42

Reputation: 687

You can do it with simple css. 

First wrap <a> with <li> and css would be li>a:focus{your style}

Upvotes: 0

Related Questions