Giacomo Lawrance Giacomo Lawrance - 1 year ago 72
CSS Question

Moving a pdf to the left with css

<!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]-->
<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="">
<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>
<body id="top">

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

<div class="header-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>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
<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>
.left {
float: left;
<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 id="chart_window">
<canvas height="1024" width="800" id="the-canvas" style="border:1px solid black"></canvas>

<!-- 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
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 {

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

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

* Zooms the page in by changing the scale variable

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

* Zooms the page out by changing the scale variable

function zoomOut(){
if (scale >= minzoom) {
scale = scale - 0.1;
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

<section class="features section-padding" id="features">
<!--<div class="container">
<div class="row">
<div class="feature-list">
<p>All procedures</p>
<div class="scroll-wrapper">
<iframe src=""></iframe>
</div> -->
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
<a href="">Licence</a> | By Giacomo Lawrance.</p>
<script src=""></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 Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
<!--End of Script-->
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;

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.

.left {
float: left;
<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:

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:

And you can find the entire file here:

Thanks in advance.

Answer Source

Try adding this to the css:

canvas #the-canvas {
 transform: translateX(-20vw);

Hope that helps!


Add it into the canvas element, with the id of "the-canvas" in your html

<canvas height="892" width="629" id="the-canvas" style="border:1px solid black; transform: translateX(-20vw);"></canvas>

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download