使用css将pdf移到左侧
<!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>
<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>
你好
我正在尝试将此代码移动到左侧的pdf。但是，当我应用css时，pdf完全消失。
<style>
.left {
float: left;
}
</style>
<section class="left">
这就是我想要申请的内容。我已经关闭了部分标签，如上面的整个代码所示。您可以在此处查看页面：https://if-charts.000webhostapp.com/YSSY/YSSY_arr.html
正如您将看到的那样，pdf位于中心，并且它与左边界之间存在大量空间。由于pdf可以缩放，我想利用整个空间。我需要把它移到左边，但我不知道怎么做。
如果有帮助，可以在此处找到整个回购：https://github.com/IF-Apps/IF-Charts
您可以在此处找到整个文件：https://github.com/IF-Apps/IF-Charts/blob/Blurfix/YSSY/YSSY_arr.html
提前致谢。
1 个答案:
答案 0 :(得分：1)
尝试将此添加到css：
canvas #the-canvas {
transform: translateX(-20vw);
}
希望有所帮助！
编辑：
将它添加到canvas元素中，在html中使用“the-canvas”的id
<canvas height="892" width="629" id="the-canvas" style="border:1px solid black; transform: translateX(-20vw);"></canvas>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？