how to scroll two pdf side by side synchronously on web page? - html

I want two pdf scrolls side by side synchronously, following is my HTML.
<section class="text">
<div class="original">
<iframe src="/pdf/013009.pdf" id="pdf1" onscroll="scroll1();" type="application/pdf" width="100%" height="100%">
</iframe>
</div>
<div class="conversion">
<iframe src="/pdf/013009.pdf" id="pdf2" onscroll="scroll1();" type="application/pdf"
width="100%" height="100%">
</iframe>
</div>
</section>
I've found How to scroll two pdf side by side synchronously in html? and trying to solve my problems, but having a hard time understanding the solution, such as $("#pdf1").contents().find("#viewerContainer").on('scroll', function(){...}where did #viewerContainer come from.
this is my JQ:
$("#pdf1").on('load', function () {
$("#pdf1").contents().find(".original").on('scroll', function () {
$("#pdf2").contents().find(".conversion").scrollTop($(this).scrollTop());
});
$("#pdf2").on('load', function () {
$("#pdf2").contents().find(".conversion").on('scroll', function () {
$("#pdf1").contents().find(".original").scrollTop($(this).scrollTop());
});
});
});
i don't really understand .find(""), so ".conversion", ".original" were my guess.
now, both of the pdf scroll correctly, but they did not scroll synchronously,
anyone who could help with this situation will be appreciated.
thanks!

Related

Unmute button for responsive embedded vimeo video

I have used the vimeo generated code to embed my video in a wix website (using their HTML component tool). I've tweaked the code so it autoplays when the page loads, and it is responsive on resizing the browser window (plus full width on the webpage). The code used is:
<div style="padding:42.6% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/558081433?autoplay=1&muted=1&loop=1&autopause=0"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Anthemic Piano">
</iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
I saw someone use some neat code to add an unmute button to their video, but the code generates a very small video area on the website, rather than the full width, responsive version I'm trying to get. Here is the code they used:
<button onclick="unmute()">
UNMUTE
</button>
<div id="vimeo-player1"> </div>
<script>
var options = {
id: 194500280,
background: true
};
var vid1 = new Vimeo.Player('vimeo-player1', options);
</script>
<script>
function unmute() {
vid1.setVolume(1);
};
</script>
I tried adding in
width: 100%
to the var options = {} part of the code, but this doesn't work to make it responsive/full width.
I'd be incredibly grateful if someone was able to help amalgamate my original code, with the unmute button code so I can finally get it working. Thank you so much for your help with this.
Setting the CSS width for container and iframe must help. The code below shows the video in full-width and UNMUTE button works as expected.
<style>
.container {
height:95%;
width:100%;
}
.container iframe{
width: 100%;
height: 100%;
}
</style>
<script src="https://player.vimeo.com/api/player.js"></script>
<div class="container" id="vimeo-player1"> </div>
<button onclick="unmute()">
UNMUTE
</button>
<script>
var options = {
id: 558081433,
background: true,
muted:1,
loop:1
};
var vid1 = new Vimeo.Player('vimeo-player1', options);
vid1.play();
</script>
<script>
function unmute() {
vid1.setVolume(1);
};
</script>

Can't seem to catch any HTML5 video events

I'm trying to change the 'display' CSS property of a div when the video I have on my page finishes playing. I've tried different methods: adding an eventhandler, and listening for the end event in a separate <script> tag (under the window.onload block). I'm trying a third option but can't get it to work either:
in the body:
<div id="feels_feel_container">
<div id="AnswersWrapper" style="display: none">
Some stuff here.
</div>
<div id="VideoWrapper">
<video id="VideoWindow" src="../html/media/homepage.mp4" autoplay onended="VideoEnded()"/>
</div>
</div>
in the head:
<script>
function VideoEnded() {
AnswersWrapper.css("display", "block");
}
</script>
What am I doing wrong?
Found out that I was calling an invalid argument in my VideoEnded() function.
I should've put $("#AnswersWrapper) instead of AnswersWrapper.
Please ignore :)

How to call a phonegap funcation inside a iframe

I want to call a function in my index page which is available at "phone gap file", I have called my index page inside phone gap file with in a frame.
Current code working in web but not in application,Please any one suggest me
//code inside phonegap
function clickImage(){
alert("Phonegap app");
}
//Code inside normal html
function clickPicture(){
window.parent.clickImage();
}
index.html
_______________
<body>
<button onclick="clickPicture();">Take Picture</button>
</body>
Phonegap.html
_____________
<iframe id ="Qusframe" src="index.html" width='100%' scrolling='no' frameBorder='0' >
<p> Your browser does not support iframes. </p>
</iframe>

Issue with saving HTML canvas conent using phonegap

I have have one HTML canvas where I can do signature, For saving the canvas content I have used the plugin from the following URL,
https://github.com/devgeeks/Canvas2ImagePlugin
After using this plugin, I have one issue i.e, The image is saving to phone's gallery but the image is blank image that is just a black screen. Th canvas content is not saving. How can we get the canvas content and save it in the phone's gallery?
Script:
var sigCapture;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
$(document).ready(function() {
sigCapture = new SignatureCapture( "signature" );
});
}
function saveCanvas()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('signature')
);
}
</script>
HTML:
<div data-role="page" id="personalinfo">
<div data-role="header" id="header" data-position="fixed">
<h4>SBI Account Open</h4>
</div>
<h2>SIGNATURE</h2>
<div id="canvasContainer" >
<canvas id="signature" />
</div>
<button onClick='saveCanvas()'>Start</button>
</div>
Can anyone help me how to save the canvas content i.e, signature
I'm flying blind here, since don't have how to test it right now, but: canvas its not a self closing tag. Try changint it to <canvas id="signature"></canvas>

How to unload iframe until It is displayed

I have deployed many iframes to show and hide for each tab,
<div class="slide" data-slide="1">
<iframe src="url" width="100%" height="100%"></iframe>
</div>
<div class="slide" data-slide="2">
<iframe src="url" width="100%" height="100%"></iframe>
</div>
<div class="slide" data-slide="3">
<iframe src="url" width="100%" height="100%"></iframe>
</div>
this is how its code look likes. although some buttons is not displayed.
there is the buttons matching for each iframe.
every time each buttons is clicked, then, matching iframe will be shown to user.
let's imagine that we have 100 iframes.
browser will load so many iframes. then, the users have to spend a lot of times.
so definetely I want to unload iframes until It is displyed.
how can I do that?
You can dynamically change the "src" attribute of the iframe on button click event.
Something like:
<button data-url="http://google.com">Google</button>
<button data-url="http://yahoo.com">Yahoo!</button>
<button data-url="http://aol.com">Aol.</button>
<iframe id="myFrame" src="http://google.com" width="100%" height="100%"></iframe>
Using jQuery:
$( "button" ).on( "click", function(){
var _url = $( this ).data( "url" );
$( "#myFrame" ).attr( "src", _url );
})
Doing so, you will just need a single frame element opposed to frames equivalent to no of buttons.