CODEWITHSUNDEEP
javascripthtmlpdf
Vaibhav singh
Vaibhav singh

Reputation: 81

How to scroll two pdf side by side synchronously in html?

I am creating a side by side view in html to compare two pdfs , i tried to use pdfjs to display two pdfs side by side but dropped the ide , currently i have this code :

<div class="row">
        <div class="col-md-6">
            <object data="uploaded\\1.pdf" id="pdf1" onscroll="scroll1();" type="application/pdf" width="100%" height="100%"> 
            </object>
        </div>
       <div class="col-md-6">
            <object data="uploaded\\2.pdf" id="pdf2" onscroll="scroll2();" 
            type="application/pdf" width="100%" height="100%">
            </object>
        </div>
 </div>

it did display the pdf correctly side by side but there scroll isn't sync.

For scrolling i have used on scroll event and tried to print something in console just to check whether onscoll event is working or not but no luck , also i tried iframe in place of object , but issue remains , is there any way to display pdf side by side and sync there scrolls.?

Any other approach rather than this is also welcome.

Upvotes: 0

Views: 1852

Answers (2)

Vaibhav singh
Vaibhav singh

Reputation: 81

I solved my issue with this :

$("#pdf1").on('load', function() {
  $("#pdf1").contents().find("#viewerContainer").on('scroll', function() {
    $("#pdf2").contents().find("#viewerContainer").scrollTop($(this).scrollTop());
  });
});

$("#pdf2").on('load', function() {
  $("#pdf2").contents().find("#viewerContainer").on('scroll', function() {
    $("#pdf1").contents().find("#viewerContainer").scrollTop($(this).scrollTop());
  });
});

I removed the scroll function calling on onScroll of iFrame which doesn't work and added on load function,then i added the scroll function on child of the iFrame and sync the iFrame's child's it.

Upvotes: 0

notrev
notrev

Reputation: 680

Maybe this could help you:

http://jsfiddle.net/a3mo6tpb/2/

I first used the scroll event, but ended up having a chain reaction that scrolling one would scroll the other and the event would be triggered on the other which, in turn, would trigger the one again, and so on, making both them scroll all the way down. So I used the wheel event to have it working, as I don't have too much time to fix the chain reaction issue at the moment

Upvotes: 1

Related Questions