Javascript focus element on class active

Question

I have lines text which able the user to push the next arrow (on keyboard) to change / move active word, so the user can focus on the 'red color word'.

The problem is, the height of the element have limit (in this case is 200px) and I want to make the user focus on active word (when the active word reach the middle of element) on the middle of element.

Please help me.. Thank you

document.onkeydown = pressKey;
function pressKey(e) {
    e = e || window.event;
    if (e.keyCode == '39') {
        var word = $('pre span.active');
        if($(word).next('span').length){
            $(word).next().addClass('active');
            $(word).removeClass('active');
        }
        
        // THIS is the line of the problem 
        $('pre').animate({ scrollTop: $('span.active').offset().top - ( $(window).height() - $('span.active').outerHeight(true) ) / 2  }, 10);
    }
    if (e.keyCode == '37') {
        var word = $('pre span.active');
        if($(word).prev('span').length){
            $(word).prev().addClass('active');
            $(word).removeClass('active');
        }
        
        // THIS is the line of the problem
        $('pre').animate({ scrollTop: $('span.active').offset().top - ( $(window).height() - $('span.active').outerHeight(true) ) / 2  }, 10);
    }
}

pre {max-height:200px;}
span.active {color:red}



  click this element then push arrow next (keyboard)
  All I want
  is when
  user push next arrow
  until the active
  class reach the middle
  of this element then
  automatically move the scroll
  to keep the
  active class on
  the middle of
  element so
  the user have
  focus on the
  middle of this element
  also when the user
  push prev arrow minim
  veniam quis nostrud
  excertitation ullaco laboris
  lorem ipsum dolor
  sit amet
  consectetur adispicing elit
  sed do eiusmod
  tempor incididunt ut labore
  et dolore magna aliqua
  ut enim ad minim
  veniam quis nostrud
  excertitation ullaco laboris
  lorem ipsum dolor
  sit amet
  consectetur adispicing elit
  sed do eiusmod
  tempor incididunt ut labore
  et dolore magna aliqua
  ut enim ad minim
  veniam quis nostrud
  excertitation ullaco laboris

Brandon Hill · Accepted Answer

You should use position not offset, and add the existing scrollTop property (since it affects the position):

document.onkeydown = pressKey;
var pre = $('pre');
function pressKey(e) {
    e = e || window.event;
    if (e.keyCode == '39') {
        var word = $('pre span.active');
        if($(word).next('span').length){
            $(word).next().addClass('active');
            $(word).removeClass('active');
        }
        
        var scrollTop = pre[0].scrollTop + $('span.active').position().top - pre.height() / 2;
        pre.animate({ scrollTop: scrollTop }, 10);
    }
    if (e.keyCode == '37') {
        var word = $('pre span.active');
        if($(word).prev('span').length){
            $(word).prev().addClass('active');
            $(word).removeClass('active');
        }
        
        var scrollTop = pre[0].scrollTop + $('span.active').position().top - pre.height() / 2;
        pre.animate({ scrollTop: scrollTop }, 10);
    }
}

pre {max-height:200px}
span.active {color:red}



  click this element then push arrow next (keyboard)
  All I want
  is when
  user push next arrow
  until the active
  class reach the middle
  of this element then
  automatically move the scroll
  to keep the
  active class on
  the middle of
  element so
  the user have
  focus on the
  middle of this element
  also when the user
  push prev arrow minim
  veniam quis nostrud
  excertitation ullaco laboris
  lorem ipsum dolor
  sit amet
  consectetur adispicing elit
  sed do eiusmod
  tempor incididunt ut labore
  et dolore magna aliqua
  ut enim ad minim
  veniam quis nostrud
  excertitation ullaco laboris
  lorem ipsum dolor
  sit amet
  consectetur adispicing elit
  sed do eiusmod
  tempor incididunt ut labore
  et dolore magna aliqua
  ut enim ad minim
  veniam quis nostrud
  excertitation ullaco laboris

Javascript focus element on class active

Answers (1)

Related Questions