Clever Geek Handbook

Javascript focus element for active class

I have text strings that allows the user to press the next arrow (on the keyboard) to change / move the active word so that the user can focus on the "red color word".

The problem is that the element's height has a limit (in this case 200px) and I want to emphasize the active word (when the active word reaches the middle of the element) in the middle of the element.

Please help me .. Thanks.

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}
      

        
        
        
      

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="text">
  <span class="active">click this element then push arrow next (keyboard)</span>
  <span>All</span> <span>I</span> <span>want</span>
  <span>is</span> <span>when</span>
  <span>user</span> <span>push</span> <span>next</span> <span>arrow</span>
  <span>until</span> <span>the</span> <span>active</span>
  <span>class</span> <span>reach</span> <span>the</span> <span>middle</span>
  <span>of</span> <span>this</span> <span>element</span> <span>then</span>
  <span>automatically</span> <span>move</span> <span>the</span> <span>scroll</span>
  <span>to</span> <span>keep</span> <span>the</span>
  <span>active</span> <span>class</span> <span>on</span>
  <span>the</span> <span>middle</span> <span>of</span>
  <span>element</span> <span>so</span>
  <span>the</span> <span>user</span> <span>have</span>
  <span>focus</span> <span>on</span> <span>the</span>
  <span>middle</span> <span>of</span> <span>this</span> <span>element</span>
  <span>also</span> <span>when</span> <span>the</span> <span>user</span>
  <span>push</span> <span>prev</span> <span>arrow</span> <span>minim</span>
  <span>veniam</span> <span>quis</span> <span>nostrud</span>
  <span>excertitation</span> <span>ullaco</span> <span>laboris</span>
  <span>lorem</span> <span>ipsum</span> <span>dolor</span>
  <span>sit</span> <span>amet</span>
  <span>consectetur</span> <span>adispicing</span> <span>elit</span>
  <span>sed</span> <span>do</span> <span>eiusmod</span>
  <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span>
  <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span>
  <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span>
  <span>veniam</span> <span>quis</span> <span>nostrud</span>
  <span>excertitation</span> <span>ullaco</span> <span>laboris</span>
  <span>lorem</span> <span>ipsum</span> <span>dolor</span>
  <span>sit</span> <span>amet</span>
  <span>consectetur</span> <span>adispicing</span> <span>elit</span>
  <span>sed</span> <span>do</span> <span>eiusmod</span>
  <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span>
  <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span>
  <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span>
  <span>veniam</span> <span>quis</span> <span>nostrud</span>
  <span>excertitation</span> <span>ullaco</span> <span>laboris</span>
</pre>
Run codeHide result


+3


source to share


1 answer


You should use position

not offset

and add the existing property scrollTop

(since it affects 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}
      

        
        
        
      

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="text">
  <span class="active">click this element then push arrow next (keyboard)</span>
  <span>All</span> <span>I</span> <span>want</span>
  <span>is</span> <span>when</span>
  <span>user</span> <span>push</span> <span>next</span> <span>arrow</span>
  <span>until</span> <span>the</span> <span>active</span>
  <span>class</span> <span>reach</span> <span>the</span> <span>middle</span>
  <span>of</span> <span>this</span> <span>element</span> <span>then</span>
  <span>automatically</span> <span>move</span> <span>the</span> <span>scroll</span>
  <span>to</span> <span>keep</span> <span>the</span>
  <span>active</span> <span>class</span> <span>on</span>
  <span>the</span> <span>middle</span> <span>of</span>
  <span>element</span> <span>so</span>
  <span>the</span> <span>user</span> <span>have</span>
  <span>focus</span> <span>on</span> <span>the</span>
  <span>middle</span> <span>of</span> <span>this</span> <span>element</span>
  <span>also</span> <span>when</span> <span>the</span> <span>user</span>
  <span>push</span> <span>prev</span> <span>arrow</span> <span>minim</span>
  <span>veniam</span> <span>quis</span> <span>nostrud</span>
  <span>excertitation</span> <span>ullaco</span> <span>laboris</span>
  <span>lorem</span> <span>ipsum</span> <span>dolor</span>
  <span>sit</span> <span>amet</span>
  <span>consectetur</span> <span>adispicing</span> <span>elit</span>
  <span>sed</span> <span>do</span> <span>eiusmod</span>
  <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span>
  <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span>
  <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span>
  <span>veniam</span> <span>quis</span> <span>nostrud</span>
  <span>excertitation</span> <span>ullaco</span> <span>laboris</span>
  <span>lorem</span> <span>ipsum</span> <span>dolor</span>
  <span>sit</span> <span>amet</span>
  <span>consectetur</span> <span>adispicing</span> <span>elit</span>
  <span>sed</span> <span>do</span> <span>eiusmod</span>
  <span>tempor</span> <span>incididunt</span> <span>ut</span> <span>labore</span>
  <span>et</span> <span>dolore</span> <span>magna</span> <span>aliqua</span>
  <span>ut</span> <span>enim</span> <span>ad</span> <span>minim</span>
  <span>veniam</span> <span>quis</span> <span>nostrud</span>
  <span>excertitation</span> <span>ullaco</span> <span>laboris</span>
</pre>
Run codeHide result


+4


source






More articles:


All Articles