Moving a pdf to the left with css

Moving a pdf to the left with css
0

#1
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>IF-Charts - Charts and Plates for Flight Simulation</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
    <link rel="stylesheet" href="../css/normalize.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/jquery.fancybox.css">
    <link rel="stylesheet" href="../css/flexslider.css">
    <link rel="stylesheet" href="../css/styles.css">
    <link rel="stylesheet" href="../css/queries.css">
    <link rel="stylesheet" href="../css/etline-font.css">
    <link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../css/Main.css">
    <script src="../js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body id="top">

    <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <section class="hero">
        <section class="navigation">
            <header>
                <div class="header-content">

                    <div class="header-nav">
                        <nav>
                            <ul class="primary-nav">
                            <li><a href="../index.html">Home</a></li>
                                <li><a href="../ifcharts.html">IF-Charts</a></li>
                                <li><a href="../learnmore.html">Learn More</a></li>
                                <li><a href="../contact.html">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="navicon">
                        <a class="nav-toggle" href="#"><span></span></a>
                    </div>
                </div>
            </header>
        </section>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="hero-content text-center">
                      <h1>Sydney arrivals</h1>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <!--
  <style>
   .left {
     float: left;
   }
  </style>
  <section class="left"> -->
                      <div id="nav_buttons">
                        <button id="prev">Previous</button>
                        <button id="next">Next</button>
                        <button id="zoomin">Zoom In</button>
                        <button id="zoomout">Zoom Out</button>
                        &nbsp; &nbsp;
                        <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
                        <span>   Zoom Level: <span id="zoom_lvl"></span></span>
                      </div>

                      <div id="chart_window">
                        <canvas height="1024" width="800" id="the-canvas" style="border:1px solid black"></canvas>
                      </div>

                      <!-- for legacy browsers add compatibility.js -->
                      <!--<script src="../compatibility.js"></script>-->

                      <script src="../pdfjs/pdf.js"></script>

                      <script id="script">
                        //
                        // If absolute URL from the remote server is provided, configure the CORS
                        // header on that server.
                        //
                        var url = '../pdf/YSSY_arr.pdf';


                        //
                        // Disable workers to avoid yet another cross-origin issue (workers need
                        // the URL of the script to be loaded, and dynamically loading a cross-origin
                        // script does not work).
                        //
                        // PDFJS.disableWorker = true;

                        //
                        // In cases when the pdf.worker.js is located at the different folder than the
                        // pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
                        // shall be specified.
                        //
                        // PDFJS.workerSrc = '../../build/pdf.worker.js';

                        var pdfDoc = null,
                            pageNum = 1,
                            pageRendering = false,
                            pageNumPending = null,
                            scale = 1.5,
                            maxzoom = 1.8,
                            minzoom = 0.5,
                            canvas = document.getElementById('the-canvas'),
                            ctx = canvas.getContext('2d');

                        /**
                         * Get page info from document, resize canvas accordingly, and render page.
                         * @param num Page number.
                         */
                        function renderPage(num) {
                          pageRendering = true;
                          // Using promise to fetch the page
                          pdfDoc.getPage(num).then(function(page) {
                            var viewport = page.getViewport(scale);
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;

                            // Render PDF page into canvas context
                            var renderContext = {
                              canvasContext: ctx,
                              viewport: viewport
                            };
                            var renderTask = page.render(renderContext);

                            // Wait for rendering to finish
                            renderTask.promise.then(function () {
                              pageRendering = false;
                              if (pageNumPending !== null) {
                                // New page rendering is pending
                                renderPage(pageNumPending);
                                pageNumPending = null;
                              }
                            });
                          });

                          // Update page counters
                          document.getElementById('page_num').textContent = pageNum;
                          document.getElementById('zoom_lvl').textContent = +scale.toFixed(1);;

                          //Math.round(scale * 10)/10;

                        }

                        /**
                         * If another page rendering in progress, waits until the rendering is
                         * finised. Otherwise, executes rendering immediately.
                         */
                        function queueRenderPage(num) {
                          if (pageRendering) {
                            pageNumPending = num;
                          } else {
                            renderPage(num);
                          }
                        }

                        /**
                         * Displays previous page.
                         */
                        function onPrevPage() {
                          if (pageNum <= 1) {
                            return;
                          }
                          pageNum--;
                          queueRenderPage(pageNum);
                        }
                        document.getElementById('prev').addEventListener('click', onPrevPage);

                        /**
                         * Displays next page.
                         */
                        function onNextPage() {
                          if (pageNum >= pdfDoc.numPages) {
                            return;
                          }
                          pageNum++;
                          queueRenderPage(pageNum);
                        }
                        document.getElementById('next').addEventListener('click', onNextPage);

                        /**
                        * Zooms the page in by changing the scale variable
                        **/

                        function zoomIn(){
                          if (scale <= maxzoom) {
                            scale = scale + 0.1;
                          }
                          queueRenderPage(pageNum);
                        }
                        document.getElementById('zoomin').addEventListener('click', zoomIn);

                        /**
                        * Zooms the page out by changing the scale variable
                        **/

                        function zoomOut(){
                          if (scale >= minzoom) {
                            scale = scale - 0.1;
                          }
                          queueRenderPage(pageNum);
                        }
                        document.getElementById('zoomout').addEventListener('click', zoomOut);

                        /**
                         * Asynchronously downloads PDF.
                         */
                        PDFJS.getDocument(url).then(function (pdfDoc_) {
                          pdfDoc = pdfDoc_;
                          document.getElementById('page_count').textContent = pdfDoc.numPages;

                          // Initial/first page rendering
                          renderPage(pageNum);
                        });
                      </script>

                      </body>
                      </html>
    </section>
    <section class="features section-padding" id="features">
        <!--<div class="container">
            <div class="row">
                <div class="feature-list">
                    <h3>Canberra</h3>
                    <p>All procedures</p>
                      <div class="scroll-wrapper">
                       <iframe src="https://uk.flightaware.com/resources/airport/KLAX/ALL/all/pdf"></iframe>
                      </div>
                  </div>
               </div>
          </div> -->
       </section>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="footer-links">
                        <a href="https://github.com/GiacomoLaw/IF-Charts/blob/master/LICENSE">Licence</a> | By Giacomo Lawrance.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
    <script src="bower_components/retina.js/dist/retina.js"></script>
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="bower_components/classie/classie.js"></script>
    <script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
    <!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/58333b43fccdfa3ec83b78d6/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
    <script>
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X','auto');ga('send','pageview');
    </script>
</body>
</html>

Hi there

I am trying to make this code move the pdf to the left. However, when I apply the css, the pdf disappears completely.

<style>
       .left {
         float: left;
       }
      </style>
      <section class="left">

That is what I am trying to apply. I have closed the section tags as can be seen in the entire code above. You can see the page here: https://if-charts.000webhostapp.com/YSSY/YSSY_arr.html

As you will be able to see, the pdf is in the centre, and there is a large amount of space between it and the left border. As the pdf can be zoomed, I would like to take advantage of the whole space. I need to move it to the left, but I have no idea how to.

If it helps, the entire repo can be found here: https://github.com/IF-Apps/IF-Charts

And you can find the entire file here: https://github.com/IF-Apps/IF-Charts/blob/Blurfix/YSSY/YSSY_arr.html

Thanks in advance.


#2

Never mind, I managed in the end… :frowning: