Split one HTML page to display different views on multiple screens - javascript

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.

Related

Scroll a cropped image in step with a textarea just below

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/

In page (hash) link, get to the first visible element

I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.
<div class='hideOnMobile showOnDesktop'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<a name='manuals' href='#'>Manuals</a>
<!-- Extra html for Mobile presentations -->
</div>
The important pieces of my css is basically hiding and showing the elements using media queries:
#media only screen and (min-width: 420px) {
.showOnMobile { display: block; }
.hideOnMobile { display: none; }
}
#media only screen and (min-width: 1050px) {
.showOnDesktop { display: block; }
.hideOnDesktop { display: none; }
}
CSS is attached for reference. The css is actually working as expected. The problem is the following:
When the browser receives the url for that specific page http://example.org/page.html#manuals, I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot
Maybe the markup can be altered?
<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
<!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
<!-- Extra html for Mobile presentations -->
</div>
This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.

I have found some spam links that are only visible on mobile devices, and I can't find where is the script that contains this spam links

So I have this problem only when I see the page on mobile devices! I tried to find the spam links through the computer but I can't find them anywhere. I think it's in the K2 Plugins but I don't know on which one. I'll paste some of the code here I've found with the spam links:
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="itemBody">
<!-- Plugins: BeforeDisplayContent -->
<div id="js-pc">
русский бизнес за границей<br>
записки туриста
</div>
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Plugins: AfterDisplayContent -->
<div id="js-pc">
обзоры музыкальных групп<br>
спортивный туризм
</div>
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
<!--End Item Rating -->
</div>
So these are the Russian spam links I can't delete.
A solution is:
1. Start search in all files of your website by the next keyoword: base64_decode
2. You must find something like the next:
<?php $mgp='PGRpdiBpZD0iaXQtc24iPjxhIGhyZWY9Imh0dHA6Ly9qb29tbGEtbWFzdGVyLm9yZy8iIHRhcmdldD0iX2JsYW5rIiB0aXRsZT0i0LrQsNC6INGB0L7Qt9C00LDRgtGMINGB0LDQudGCINC90LAgSm9vbWxhIDMiPtC60LDQuiDRgdC+0LfQtNCw0YLRjCDRgdCw0LnRgiDQvdCwIEpvb21sYSAzPC9hPjwvZGl2Pg=='; echo base64_decode($mgp);?>
The next symptom is: this string stand right from the base code
Delete this string carefully and enjoy :)
Hope this information will help you.
Probably these links are being generated through a jquery/js code and by media queries as well, this is why the reason they only appear on mobile devices. Perhaps if you dig on these plugin's code you'd find where this is being generated assuming it's on these plugins. Somewhere on your plugin's CSS code, must be something like this example:
#js-pc {
display:none;
}
#media (max-width: 600px){
#js-pc {
display:block;
}
}
the code above make the links only visible on screens smaller than 600px width,
but you can overwrite this action through your main CSS file as well, forcing this links to not be displayed with display:none !important;. It will be something like this:
#media (max-width: 600px){
#js-pc {
display:none !important;
}
}
The media query above depends on which size they are appearing but if it's only on mobile devices I think this will fix the problem.
Here's an example of what your website is showing right now, and this is your fix

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.

CSS hidden text illegal for Search Engines? [duplicate]

This question already has answers here:
Is h1 tag that's hidden using display:none given prominence by search engines?
(10 answers)
Closed 9 years ago.
Here are basic example boxes, CSS and JS I created for jQuery Modal Box.
<!-- hidden boxes // -->
<div id="content_1" class="box">
<h1>First Box</h1>
<p>Content goes here...</p>
</div>
<div id="content_2" class="box">
<h1>Second Box</h1>
<p>Content goes here...</p>
</div>
.....
<!-- links for boxes // -->
Show First Box
Show Second Box
<!-- css // -->
<style>
.box {
display: none;
}
</style>
<!-- javascript // -->
<script type="text/javascript">
$(document).ready( function() {
$('.link').click( function() {
// process modal
});
});
</script>
So when User click on First/Second Box link, the jQuery modal popup with content. My Purpose is not to hide the text. I heard and read in some blogs, Google will take action with hidden text. Is my way illegal/bad for SEO? OR are there better way to do this without display:none?
You will find Google themselves actually use display:none; on their homepage - and considering the popularity of jQuery and other JavaScript libraries using these kinds of effects, I can't see how it will negatively impact your SEO if you use it in necessary circumstances.
I use following snippet to hide sub-menus on css3 navigation menus with some cool ease-in, ease-in-out transitions . And afaik this is valid css to hide elements when it comes to SEO.
opacity: 0;
visibility: hidden;
Already discussed at
Is there an alternative to conditional display:none
Instead of using display:none; you can use left: -9999px;position:absolute; it will still display the content for the search engine but it will be displayed somewhere not for the users.
http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/

Categories

Resources