2

The html code <div id="sim"></div> and related CSS code below

#sim{
    width:800px;
    height:300px;
    border:solid 1px #2e2e2e;
    color:#2e2e2e;
    padding:5px;
overflow:auto;
border:9px outset #0ADA0A;
margin-top:1em;
font-size:16pt;
}

its used for reading simulation. if i will enter more than 2000 words into the box, the box changes with scroll bar. when i press the button, it will reading with highlighted on text.

But, the border size is width:800px; height:300px;, the words overflow into the box, the text has been hidden highlighting .

https://jsfiddle.net/8Lwm6gh1/40/

How can i see the reading with auto focus and auto scroll using JS?

Pandu
  • 159
  • 1
  • 12

2 Answers2

1

If I understand your question correctly, you can use Element.scrollIntoView(), and add this line at the end of your timeout:

$('#sim b:last')[0].scrollIntoView(false);

Fiddle

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
0

I might have misunderstood what you were trying to achieve, but the way I comprehended it you wanted the view to scroll so that the current word always was shown in the div.

In order to keep track of the elements in the view, I used a <span> for each word, and attached a class read on all words that have been read. That way, you can use jQuery to select the next word by having the following selector:

var unread = $('span:not(.read):first');

I altered the code you wrote, and made it work. You also never stop the timeout, so I added a clearTimeout()-function.

JSFiddle

bvx89
  • 868
  • 5
  • 12