1 Reply Latest reply on Aug 27, 2013 6:51 AM by gkaiseril

    How to add a hand tool (grab the page and drag) function on Chrome and firefox pdf viewer?

    AdobeUser999123 Level 1

      To clarify, hand tool is a function for user click on the pdf and dragging around , that is used to replace the scroll bar navigating .

      The problem is, by default the Chrome and firefox pdf viewer do not have that function and I would like allow the user to drag the page.

      A workaround is to use a jquery plugin (grab to pan https://github.com/Rob--W/grab-to-pan.js in my case) with an embed object (pdf viewer). When I maximum the size of the pdf and user drag the embed object.

      The problem I have encounter is

      1) When using chrome/ firefox, the pdf content do not fit to the page but auto resize by default even I have set the adobe pdf open parameter , using iframe.

      2) The jquery seems conflict with the firefox pdf viewer, it works smoothly on Chrome but not firefox.

      Here is the source code, you may download the plugin from the link mention above and have a look. Don't forget to put a '1.pdf' along with the source file. Thanks

          <!DOCTYPE html>

          <head>

          <meta charset="utf-8">

          <title>Grab-to-pan.js demo</title>

          <link rel="stylesheet" href="grab-to-pan.css" type="text/css">

          <style>

          * {

              -webkit-box-sizing: border-box;

              -moz-box-sizing: border-box;

              box-sizing: border-box;

          }

          html, body {

              width: 100%;

              height: 100%;

              margin: 0;

              padding: 0;

          }

          .scrollable {

              overflow: auto;

              width: 100%;

              height: 100%;

              background-color: #EEE;

          }

          #zoomPage {

                    overflow:visible;

              width: 100%;

              height: 150%;

          }

          </style>

          </head>

          <body>

          <label><input type="checkbox" id="activate-g2p" checked> Activate Grab to Pan</label>

          <div class="scrollable" id="scrollable-container">

          <object id = 'zoomPage' type='application/pdf' data= '1.pdf#zoom=page-fit'><p>The PDF can not display</p></object>

          </div>

          <script src="grab-to-pan.js"></script>

          <script>

          document.getElementById('activate-g2p').onchange = function() {

              if (this.checked) g2p.activate();

              else g2p.deactivate();

          };

         

          var scrollableContainer = document.getElementById('scrollable-container');

          var g2p = new GrabToPan({

              element: scrollableContainer

          });

          g2p.activate();

         

          </script>

          </body>

          </html>