Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly.
The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them.
You can check out the working code here: http://plnkr.co/edit/9WhAuxOyK4l6yDeRmvle?p=preview
Here's the Angular directive:
myApp.directive('keypressEvents',
function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
console.log('linked');
element.parent().parent().bind('keypress', function (e) {
var letter = String.fromCharCode(e.which);
var target = e.target;
var charat = element[0].textContent.charAt(13);
if(charat === letter){
element.addClass("active");
element.scrollTop = 100;
}
else{
element.removeClass("active");
}
});
}
};
});
I'm trying to figure out how to calculate the offset in JavaScript and which method would be best to use to move to the right position. Any suggestions?