Scroll a cropped image in step with a textarea just below

Question

I am scanning and OCR'ing a manuscript, and to help with proofreading, I'm making a webpage with the scan and OCR'ed text in a textarea.

<!-- HIT template: TranscriptionFromAnImage-v3.0 --><!-- Bootstrap CSS v3.0.3 --><!-- Please note that Bootstrap CSS/JS and JQuery are 3rd party libraries that may update their url/code at any time. Amazon Mechanical Turk (MTurk) is including these libraries as a default option for you, but is not responsible for any changes to the external libraries -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384-IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" /><!-- The following snippet enables the 'responsive' behavior on smaller screens -->
<meta content="width=device-width,initial-scale=1" name="viewport" />
<section class="container" id="TranscriptionFromAnImage"><!-- Instructions -->
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-primary"><!-- WARNING: the ids "collapseTrigger" and "instructionBody" are being used to enable expand/collapse feature --><a class="panel-heading" href="javascript:void(0);" id="collapseTrigger"><strong>Image Transcription Instructions</strong> <span class="collapse-text">(Click to expand)</span> </a>
<div class="panel-body" id="instructionBody">
<p>Proofread and match the OCR&#39;ed text to the scan of the page.</p>

<ul>
    <li>Match the OCR&#39;ed text to the scanned image.</li>
    <li>Proofread also. (i.e. Fix spelling, grammar, etc.)</li>
    <li>Make sure compound sentences have a comma before the conjunction.</li>
    <li>Remove [P] and [/P] tags.</li>
    <li>Turn [I] and [/I] tags to <i>&nbsp;and </i>.</li>
    <li>Remove the page number at the bottom.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Instructions --><!-- Image Transcription Layout -->

<div class="row" id="workContent">
<style>
.scancrop {
  margin: 5px;
  overflow: hidden;
  justify-content: center;
  height: 40%;
}

textarea.ocr {
    height: 400px;
    min-height: 400px;
    width: 70%;
    font-size: 16px;
    line-height:1.4;
}
</style>
<div class="scancrop"><img alt="image_url" class="img-responsive center-block" src="2citiesright.jpg" /></div>
<!--<div class="col-xs-12 col-sm-8 image"><img alt="image_url" class="img-responsive center-block" src="${image_url}" /></div>-->

<!-- Input from Worker -->
<div class="form-group"><label for="WritingTexts">OCR Text:</label><textarea class="form-control ocr" id="ocr" name="ocr" required="">
Dietenafl’ale ol‘ Two Cities/2
(supernaturally deficient in nrigmality) rapped out theirs. Mere messages m the earthly order ol‘
events had lately come to the English Crown and People. from a cmgress of British subjects in
Athena: whieh.strangetorelate.haveprovedrnore importarutothehumanraeethanarty
communications
</textarea></div>
<!-- End input from Worker --><!-- End Writing Layout --><!-- Please note that Bootstrap CSS/JS and JQuery are 3rd party libraries that may update their url/code at any time. Amazon Mechanical Turk (MTurk) is including these libraries as a default option for you, but is not responsible for any changes to the external libraries --><!-- External CSS references -->
</div>
</section>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384-IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" /><!-- Open internal style sheet -->

Live example page

As you can see, the scanned image is truncated (i.e. inside a div with overflow:hidden) to fit both it and the textarea on the screen at the same time.

What I'd like to do is scroll the image when the cursor (or scrollbar) in the textarea moves down.

How can this be done using javascript?

This html code is intended to be uploaded to Amazon Mechanical Turk, which seems to allow frameworks, so either a pure javascript or framework-assisted solution will work.

Hans Dash · Answer 1 · 2017-08-12T20:36:41.557

If I interpret your question right, you want a little script to sync the scrolling between the image and the textarea. This could be done in a couple of ways.

You could for example count the position of the cursor in the textarea, like this:

var cursorPosition = $('#myTextarea').prop("selectionStart");

source: How do you get the cursor position in a textarea?

But the syncing between the textarea and the image is not great, as shown in this fiddle: https://jsfiddle.net/hpvl/ewr64hhm/2/

You could also use scrollTop to sync:

var textareascroll=$('#myTextarea').scrollTop()

The image and the textarea will be better in sync this way: https://jsfiddle.net/hpvl/ewr64hhm/1/

Scroll a cropped image in step with a textarea just below

1 Answers1