Scroll a cropped image in step with a textarea just below - javascript

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'ed text to the scan of the page.</p>
<ul>
<li>Match the OCR'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> 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.

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/

Related

CSS Set Colour Depending on Another Element

I have a number of html elements on my page, for example;
<section id="top-bar">
<!-- html content -->
</section>
<section id="header">
<!-- html content -->
</section>
<div id="left">
<!-- html content -->
</div>
<section id="footer">
<!-- html content -->
</section>
The CSS background-colour and text-colour for these sections are set in the Joomla 3.x Template settings, this is my 'Brand Colour' - see the image below.
If I choose Preset 1 in the template settings then preset1.css is loaded in the website front end, if I select Preset 2 then preset2.css is loaded in the website front end etc.
My issue is that I have other custom elements on the page (e.g. <div id="left"> in the code above). The background colour and text colour for these elements aren't set or controlled via the template settings, instead I have to manually set these in a custom.css file, which works, however I have to change this custom.css file to every time I change my 'Brand Colour'.
Basically, I'd like my custom elements to take on the same 'Brand Colours' that I specify in the template configuration. WIthout me having to change the custom.css file all the time.
So, <div id="left"> background-colour and text-colour should match <section id="top-bar"> background-colour and text-colour.
Is it possible to dynamically set the CSS using JavaScript or similar?
Thanks
You can use js to get background-color of #top_bar element and add that color as background to other elements you want, in this case its siblings. Same is for text-color.
var top_bar = $('#top-bar')
var bg = top_bar.css('background-color')
var color = top_bar.css('color')
top_bar.siblings().css({
backgroundColor: bg,
color: color
})
section, div {
width: 50px;
height: 50px;
display: inline-block;
}
#top-bar {
background: #22B8F0;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="top-bar">
Text
</section>
<section id="header">
Text
</section>
<div id="left">
Text
</div>
<section id="footer">
Text
</section>
Add a class to a parent element like the body element, such as preset1 etc, then select each element as children of that, like .preset1 #left
Then the only thing you have to change is one class, and there is no worry of resynchronisation.

have header and footer that are on out side of iframe appear and disapear when mouse enters general area

I have an iframe inside a main page container. I have managed to remove the second scroll bar that is in the main html. Leaving only the iframe scroll, this was done by request of a higher up. We have mandatory headers and footers that need to appear at all times. We decided to get creative and added some .js to out html that makes the headers and footers appear and disappear. The only problem is this causes the iframe to not take up the whole page height. because if the headers and footers are shown when mouse is over them and the iframe is too long then the footers get hidden under the page. (cant scroll down to them because the scrollbar was removed.)
What I am trying to get at is there a way I can have both work? Ill post the code.
*JavaScript*
function show_topnav()
{
document.getElementById('nybe-top-nav').style.display="block";
document.getElementById('nygov-universal-navigation-frame').style.display="block";
}
function hide_topnav()
{
document.getElementById('nybe-top-nav').style.display="none";
document.getElementById('nygov-universal-navigation-frame').style.display="none";
}
function show_bottomnav()
{
document.getElementById('nybe-footer').style.display="block";
document.getElementById('nygov-universal-footer-frame').style.display="block";
}
function hide_bottomnav()
{
document.getElementById('nybe-footer').style.display="none";
document.getElementById('nygov-universal-footer-frame').style.display="none";
}
here is the html
<header id="test-header" onMouseLeave="hide_topnav()">
<iframe id="nygov-universal-navigation-frame" title="NY Gov Universal Navigation" class="nygov-universal-container" width="100%" height="86px" src="//static-assets.ny.gov/load_global_menu/ajax?iframe=true" data-updated="2014-11-07 08:30" frameborder="0" style="border:none; overflow:hidden; width:100%; height:86px;" scrolling="no">
Your browser does not support iFrames
</iframe>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-T4FP6H" height="0" width="0" style="display:none;visibility:hidden" title="Google tag manager" ></iframe>
</noscript>
<script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0];var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;j.type='text/javascript';j.async=true;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T4FP6H');</script>
<!-- End Google Tag Manager -->
<div id="nybe-wrapper">
<!-- Begin the top navigation -->
<div id="nybe-top-nav">
<div id="nybe-account">
<span class="glyphicon glyphicon-user"></span>Your Account
</div>
<div class="nys-global-header horizontal unstacked">
<h1><span class="glyphicon glyphicon-home"></span>New York Business Express</h1>
<ul id="nys-global-nav">
<li>
Start your Business
</li>
<li>
</li>
</ul>
</div>
</div>
<div id="hidden-top" onMouseEnter="show_topnav()"> </div><!-- helper div for onMouseEnter -->
</header><!-- end header -->
here is some of the css
html{
overflow-y: hidden;
}
body.nybe-opa-frame #main-content{
margin:0px;
padding:0px;
}
body.nybe-opa-frame #main-content > iframe{
min-height:650px !important;
width:100%;
border:none;
}
body.nybe-opa-frame #nybe-footer {
margin-top:-5px;
}
/* end opa frame*/
/*#hidden-top{background-color: #142047;}*/
/*added two help divs to use on mouse enter events for the page
opacity is set to 0 so they cant be seen */
#hidden-bottom,#hidden-top{
opacity: 0.0;
height: 20px;
}
/*set all the headers and footers to display none*/
#nygov-universal-navigation-frame,#nybe-top-nav,#nybe-footer,#nygov-universal-footer-frame{
display: none;
}
most of the code was not made me my higherup created most of the page the iframe comes from an external source.
Any Ideas would be great! I know this is kind of a weird post. What i Have now works pretty well but I feel like there is a better more efficient way to do this.
Thanks!

Why does my jquery plugin stop working after I put it in a div container?

So basically I am using a jquery plug-in called blueprint split layout. The code for it can be found at: http://tympanus.net/Blueprints/SplitLayout/index.html. I modified the code to fit with my website theme and it worked perfectly, that is until I put it inside a section container with a class of content. Whenever it goes into this container, it ceases to function. However, if I keep this out of the div container, it functions beautifully, but screws the rest of the site layout up. I have searched for days for a solution, and I have tweaked and rebuilt my code to no end with no success. Can anyone please tell me what is going wrong? On another note, I did notice that some of my links are not working either when in this container. I've tried tweaking it to a div container, a section container, and article container, nothing works.
Here is a link to my html: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.html
The code in question is:
<div class="splitcontainer">
<div id="splitlayout" class="splitlayout">
<div class="intro" >
<div class="side side-left">
<div class="intro-content">
<div class="profile_containerL">
<div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
</div>
<div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
</div>
</div>
</div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile_container">
<div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
<div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
</div>
</div>
</div>
<Article>
<div class="page page-right">
<div class="page-inner">
<div class="back_R">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Development</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<div class="back_L">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Design</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-left -->
</div><!-- /intro -->
</div><!-- /container2 -->
</div><!-- /splitcontainer -->
Here is one to my css: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.css
The css code in question is:
.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}
The javascript being used for this site can be obtained from blueprint site listed above The two names of the javascript files are cbpSplitLayout.js and Classie.js, as well as the included modernizer.js file from the site.
Can anyone please help me figure out why javascript would stop once the plug-ins html is placed in the main wrapper section? Thanks in advance.
Well it's been a few days and I want to I guess provide my own answer to my question. I don't have the "exact" answer, however, this is what I have found to fix the issue. The original issue was that every time I placed my jquery coded html inside the main wrapper div, the jquery functions would not work at all. Basically I'm building a parallax one page site that has multiple slides. The second slide from the header has the jquery plug in that is suppose to have two profile pics on it. One side for the developer and one for the designer. When either profile is clicked, depending on which one, the plugin is suppose to make the page slide open either left or right. Upon clicking the "x" I put inside the inner page, the page refreshes and shuts the sliding profile.
I noticed that when this was placed inside the main wrapper div that the rest of my content was in, it ceased to function. I still cannot explain why that is. However, if I placed it on the outside of the wrapper, it would automatically become fixed at the top, blocking my fixed header. That I cannot explain either. I tried creating two different wrappers, one for the first slide, leaving the jquery code out of that wrapper, then another wrapper to place the remaining content in, but still the jquery code would just become fixed to the top of the screen and block the header. It would work, mind you, but completely wrong positioning. So... my solution, although perhaps not the right one to the issue, was to re-create all the html code. This time, I added each slide 1 at a time and messed about with the positioning finally getting the whole page to function correctly when in a relative position, aside from my header and footer being fixed. Now the plug-in works beautifully and the page is taking shape into what I wanted it to be. So... my conclusion, although I can't explain the details, is that when using a jquery plugin, the positioning of that part of html code that responds to the js, relies on positioning. Apparently the only positioning that would work in my case was relative. Another guess as to why this could be was because the plug-in was designed to be a one full page plug-in and I tweaked the html to get it to fit in a 1903px width by 600px height container. Hopefully this will help someone out there struggling with the same issue.

Split one HTML page to display different views on multiple screens

I have two screens say Screen 1 and Screen 2 and a HTML page with JavaScript/JQuery.
What I want to do is that split the HTML into two views. One on Screen 1 and the other on Screen 2.
Screen 1 has a simple view ( e.g a cinema screen for customers to view ) and Screen 2 has all the controls ( e.g visible to the person on the other end ).
Any possible solution?
Best solution would be to have 2 different pages, after all it's a
system and not a page.
But, since you want a workaround, use Bootstrap (it's
responsive, so should easily adapt to a 2 screen display).
add Bootstrap to HTML <head>:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
to HTML <body>:
<div class="wrapper-fluid">
<div class="container-fluid">
<div class="row">
<div id="screen1" class="col-md-6">
<!-- PAGE 1 HERE -->
</div>
<div id="screen2" class="col-md-6">
<!-- PAGE 2 HERE -->
</div>
</div>
</div>
</div>
and to CSS:
#screen1 {
background-color: blue;
height: 900px;
}
#screen2 {
background-color: green;
height: 900px;
}
It's old school, but I did just recently did something like this using the "target" attribute inside the anchor tag. Open two browser windows, set the "display" one to full screen and the links on the first screen (the control screen) target the second browser window. For example:
<a target='songs' href='/freebird.html'>Freebird</a>
No programming needed.

django-cms div tags with cmsplugin class interfering with slider

I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.

Categories

Resources